为什么我的 'click' eventListener 适用于前 2 <li>个而不是其余的？

Question

我对编程比较陌生。我让我的'click' eventListener工作，当你点击ul中的前两个li时，div的类会打开和关闭。然而，当你点击第二个div之后的任何一个div时，它会切换其他div的类而不是点击的那个div的类?如果您需要进一步了解情况，请随时告诉我。

例如，如果For循环输出:

• 卧推
• 硬举
• 蹲
• 肩膀按
旋度

如果我点击'卧推'和'硬举'，它将切换。info并显示其信息;但是如果我点击"蹲下"，它会把"。info"换成"curl"，以此类推…

这里是所有的代码，

<div>
{% for workout in workouts %}
<ul>
<li class="item">{{ workout.name }}</li>
{% autoescape false %}
<div class="info" id="info">
<p>{{ workout.description }}</p>
</div>
{% endautoescape %}
</ul>
{% endfor %}
</div>

let li = document.querySelectorAll("li");
let info = document.querySelectorAll(".info");
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function () {
info[i].classList.toggle("info");
});
}

.info {
display: none;
}

Answer 1

你的javascript代码没问题。

确保你的HTML是有效的

每个html标签必须正确关闭。因此，无论是<tag />还是<tag> </tag>，当浏览器遇到它认为不完整的内容时，它将尝试修补东西，这可能导致您的<li>和<div>对不对齐。

我看到你已经编辑了你的问题，所以它可能不再相关了。

注意您调试和检查实际的html浏览器解释,rightclick-> inspect将打开一个视图中,您可以看到浏览器的状态

let li = document.querySelectorAll("li");
let info = document.querySelectorAll(".info");
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
info[i].classList.toggle("info");
});
}

.info {
display: none;
}
.info-colour {
background: chocolate;
}
.item {
margin-top: 1rem;
background: orange;
}
p {
margin: 0
}

<div>
<ul>
<li class="item"> workout.name 1</li>
<div class="info info-colour">
<p> workout.description 1 </p>
<div>
Necessary Workout Equpiment: [Specific Machinery]
</div>
</div>

<li class="item">workout.name 2</li>
<div class="info info-colour">
<p> workout.description 2 </p>
<div>
Necessary Workout Equpiment: [Specific Machinery]
</div>
</div>

<li class="item">workout.name 3</li>
<div class="info info-colour">
<p> workout.description 3 </p>
<div>
Necessary Workout Equpiment: [Specific Machinery]
</div>
</div>
</ul>
</div>

Answer 2

i变量存储循环后的最后一个值，因为它在另一个回调函数中。

尝试修复:

let li = document.querySelectorAll("li");
for (let i = 0; i < li.length; i++) {
let liItem = li[i];
liItem.addEventListener("click", function () {
liItem.querySelector("div").classList.toggle("info");
});
}