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

Question

我正在尝试根据轮子何时停止在图 block 上向 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 的链接

Answer 1

仔细看看你想要做的事情，根本问题确实是id在页面中需要是唯一的，不能有多个元素具有相同的元素。但是，一种简单的方法不是使用类来对某种类型的对象进行分类，而是通过在 id 后添加数字来使 id 唯一，如下所示(请注意 id 末尾的数字) :

<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