不明白为什么代码直到问题 3 工作正常，但不适用于问题 4 和 5

Question

我试图使用HTML、CSS和JavaScript构建一个简单的常见问题页面，但不明白为什么前三个事件侦听器可以工作，而其余的则不工作。

JavaScript:

document.getElementById("question1").querySelector("span").addEventListener("click", function () {
document.querySelector(".answer1").classList.toggle("active-state");
});
document.getElementById("question2").querySelector("span").addEventListener("click", function () {
document.querySelector(".answer2").classList.toggle("active-state");
})
document.getElementById("question3").querySelector("span").addEventListener("click", function () {
document.querySelector(".answer3").classList.toggle("active-state");
})
document.getElementById("question4").querySelector("span").addEventListener("click", function () {
document.querySelector(".answer4").classList.toggle("active-state");
})
document.getElementById("question5").querySelector("span").addEventListener("click", function () {
document.querySelector(".answer5").classList.toggle("active-state");
})

HTML

<h1>FAQ</h1>
<p id="question1">How many team members can I invite?<span><img src="./images/icon-arrow-down.svg" alt=""></span>
</p>
<p class="answer active-state answer1">You can invite up to 2 additional users on the Free plan. There is no limit
on team members
for the Premium plan.</p>
<hr>
<p id="question2"> What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
alt=""></span></p>
<p class="answer active-state answer2"> No more than 2GB. All files in your account must fit your allotted storage
space.</p>
<hr>
<p id="question3"> How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt=""></span></p>
<p class="answer active-state answer3"> Click “Forgot password” from the login page or “Change password” from your
profile page.
A reset link will be emailed to you.</p>
<hr>
<p id="question4"> Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt=""></span></p>
<p class="answer active-state answer4"> Yes! Send us a message and we’ll process your request no questions asked.
</p>
<hr>
<p id="question5"> Do you provide additional support?<span><img src="./images/icon-arrow-down.svg" alt=""></span>
</p>
<p class="active-state answer answer5"> Chat and email support is available 24/7. Phone lines are open during
normal business
hours. </p>

document.getElementById("question1").querySelector("span").addEventListener("click", function() {
document.querySelector(".answer1").classList.toggle("active-state");
});
document.getElementById("question2").querySelector("span").addEventListener("click", function() {
document.querySelector(".answer2").classList.toggle("active-state");
})
document.getElementById("question3").querySelector("span").addEventListener("click", function() {
document.querySelector(".answer3").classList.toggle("active-state");
})
document.getElementById("question4").querySelector("span").addEventListener("click", function() {
document.querySelector(".answer4").classList.toggle("active-state");
})
document.getElementById("question5").querySelector("span").addEventListener("click", function() {
document.querySelector(".answer5").classList.toggle("active-state");
})

.active-state {
background: pink;
}

<h1>FAQ</h1>
<p id="question1">How many team members can I invite?<span><img src="./images/icon-arrow-down.svg" alt="1"></span>
</p>
<p class="answer active-state answer1">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
<hr>
<p id="question2"> What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
alt="2"></span></p>
<p class="answer active-state answer2"> No more than 2GB. All files in your account must fit your allotted storage space.
</p>
<hr>
<p id="question3"> How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt="3"></span></p>
<p class="answer active-state answer3"> Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
<hr>
<p id="question4"> Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt="4"></span></p>
<p class="answer active-state answer4"> Yes! Send us a message and we’ll process your request no questions asked.
</p>
<hr>
<p id="question5"> Do you provide additional support?<span><img src="./images/icon-arrow-down.svg" alt="5"></span>
</p>
<p class="active-state answer answer5"> Chat and email support is available 24/7. Phone lines are open during normal business hours. </p>

Answer 1

虽然这确实如预期一样有效，但我知道这不是问题的一部分，但有更好的方法可以做到这一点。我不想让教学时间过去。如果你有100或200个问题怎么办。。。最终会变成很多基于ID结构的JS。

对于您的问题，请将<p id="question...">更改为<p class="question">

从答案类中删除answer1、answer2、answer3等。

然后收集所有问题：

let questions = document.querySelectorAll(".question span");

然后收集所有答案：

let answers = document.querySelectorAll(".answer");

然后像这样循环通过它们。。。

for (let i = 0; i < questions.length; i++) {
questions[i].addEventListener("click", function () {
answers[i].classList.toggle("active-state");
});
}

这基本上说；对于我点击的每个问题跨度，为每个答案切换active-state类">

然后你可以有任意多的问题，你不必担心添加更多的JS。

查看此片段以了解其工作原理：

let questions = document.querySelectorAll(".question span");
let answers = document.querySelectorAll(".answer");
for (let i = 0; i < questions.length; i++) {
questions[i].addEventListener("click", function () {
answers[i].classList.toggle("active-state");
});
}

.active-state {
background: pink;
}

<h1>FAQ</h1>
<p class="question">How many team members can I invite?
<span><img src="./images/icon-arrow-down.svg" alt="1"></span>
</p>
<p class="answer active-state">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
<hr>
<p class="question"> What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
alt="2"></span></p>
<p class="answer active-state"> No more than 2GB. All files in your account must fit your allotted storage space.
</p>
<hr>
<p class="question"> How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt="3"></span></p>
<p class="answer active-state"> Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
<hr>
<p class="question"> Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt="4"></span></p>
<p class="answer active-state"> Yes! Send us a message and we’ll process your request no questions asked.
</p>
<hr>
<p class="question"> Do you provide additional support?<span><img src="./images/icon-arrow-down.svg" alt="5"></span>
</p>
<p class="active-state answer"> Chat and email support is available 24/7. Phone lines are open during normal business hours. </p>