在这种情况下我可以使用查询选择器吗[重复]答案

【问题标题】：can i use query Selector all in this circumstance [duplicate]在这种情况下我可以使用查询选择器吗[重复]
【发布时间】：2020-07-24 00:26:42
【问题描述】：

    <head>
    <style>
    .hiddenanswer { display:none;}
    </style>
    </head>
   <body>

    <div id = "allquestions">

    <div class="questions">
    <p> What happens if i want to buy an item </p>
    <p class="hiddenanswer> this cost 600 pounds but we offer dis counts </p>
    </div>

     <div class="questions">
     <p> What happens if i want to buy this item </p>
     <p class="hiddenanswer"> this cost 400 pounds but we offer discounts </p>
     </div>


     <div class="questions">
    <p> What happens if i want to buy a unit </p>
    <p class="hiddenanswer"> this cost 50 pounds but we offer discounts </p>
   </div>

   </div>


<script>


    var para = document.querySelectorAll(" .questions p:nth-child(1)");
    para.addEventListener('click', displayAnswer);


    function displayAnswer () {  
    this.parentNode.lastElementChild.style.display = "block";
   }

  </script>
  </body>

我正处于 javascript 的早期学习阶段，我真的很想接受这个。如果我的理解是正确的，这应该可以工作，但浏览器无法识别 querySelectorAll。我想实现一个关于练习项目的常见问题解答页面，并且一旦我单击问题就会出现答案。每个答案都有一个 css 类，将它们显示为“无”，当单击问题时，它们显示为“块”。如果我通过 document.getElementsByClassNames 分别定位每个 P 元素并选择我的类 Node 并为每个 p 元素分别添加一个事件侦听器，它可以工作，但我认为 querySelectorAll 应该在这里工作，这样我就不必采取那些冗长的步骤。可能是我的浏览器有问题，还是我对 querySelectorAll 的误解？谢谢大家

【问题讨论】：

您需要遍历 querySelectorAll 返回的集合。它类似于数组（但不完全是数组），所以你不能只给它添加一个事件监听器。
这能回答你的问题吗？ addEventListener on a querySelectorAll() with classList

标签： javascript addeventlistener display selectors-api queryselector

【解决方案1】：

正如其他人所指出的，只要您循环遍历目标元素以添加侦听器，每个问题添加一个侦听器肯定有效。

这是使用event delegation 的可能替代方案，它避免了循环的需要并提供稍微更好的性能（除非您要添加很多侦听器，在这种情况下，性能差异可能是重要）。

// Selects the outer div
const questionsDiv = document.getElementById("all-questions")

// Calls `displayAnswer` when questionsDiv or something inside it is clicked
questionsDiv.addEventListener('click', displayAnswer);

// Listeners can automatically access events that trigger them
function displayAnswer(event){ 

  // Event objects include a `target` property
  const clickedThing = event.target;
  
  // Makes sure the target is something we care about before proceeding  
  if(clickedThing.classList.contains("trigger")){

    // Changes the `.classList` property, and lets CSS handle the styling 
    clickedThing.nextElementSibling.classList.remove("hidden-answer");
  }
}

.question-container {
  margin-bottom: 10px;
  border: 1px solid lightgrey;
}

.hidden-answer {
  display: none;
}

<div id="all-questions">
  <div class="question-container">
    <p class="trigger"> What happens if i want to buy an item? </p>
    <p class="hidden-answer"> this cost 600 pounds but we offer discounts </p>
  </div>

  <div class="question-container">
    <p class="trigger"> What happens if i want to buy this item? </p>
    <p class="hidden-answer"> this cost 400 pounds but we offer discounts </p>
  </div>

  <div class="question-container">
    <p class="trigger"> What happens if i want to buy a unit? </p>
    <p class="hidden-answer"> this cost 50 pounds but we offer discounts </p>
  </div>
</div>

【讨论】：