javascript - 我正在尝试将一个类添加到某个 div，它只是将它添加到具有此 ID 的 div 之一，为什么？

Question

我正在尝试根据这个轮子何时停止在瓷砖上来向 div 添加一个类。我是 javascript 的新手，我正在努力学习。当车轮停在数据变量中的第一个标签上而不是其他标签上时它可以工作，为什么？这是将类添加到 div 的 javascript

var name = document.getElementById("slide-area");
 var divname = document.getElementById("question-slide");
 var number = divname.getAttribute("data-number");
 var pickvalue = data[picked].value;
 if(pickvalue == number){ 
	divname.className += " display";    
  }

这是我的代码的链接https://code.sololearn.com/WM3ISd3OEEUc

标签： javascript

Answer 1

仔细看看你正在尝试做的事情，根本问题确实是id需要在页面中是唯一的，不能有多个元素具有相同的元素。但不是使用类来分类某种类型的对象，一种简单的方法是通过在它们后面加上一个数字来使 id 唯一，就像这样（注意ids 末尾的数字：

<div id="question-slide1" class="question-display" data-number="1">
    <h1>hello world 1</h1>
</div>
<div id="question-slide2" class="question-display" data-number="2">
    <h1>hello world 2</h1>
</div>
<div id="question-slide3" class="question-display" data-number="3">
    <h1>hello world 3</h1>
</div>

然后在您的 javascript 代码中，您可以id使用选择的数字构建：

container.on("click", spin);

var pickvalue = data[picked].value;
var name = document.getElementById("slide-area");
var divname = document.getElementById("question-slide" + pickvalue);
var number = divname.getAttribute("data-number");

if(pickvalue == number){ 
    divname.className += " display";
}

它在行动：https ://code.sololearn.com/Wst1Zv2nAzwf/#html