如何定位 div 内的类（单击时自动）

Question

我想获取所有带有课堂questions元素，给它们一个 onclick，然后针对特定的点击元素。 在这个点击的元素中，我想获取带有类answer-text的 div 并添加活动类。

我现在的代码：

 var getQuestions = document.querySelectorAll('.questions'); getQuestions.forEach(function(question) { question.addEventListener('click', function(e) { var target = e.target; var answer = target.getElementsByClassName('answer-text'); answer.classList.add('active'); }) });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div>

我认为/知道我真的很接近它的工作，但无法完成使其工作的最后一步。 有谁知道如何解决这个问题？

Answer 1

代表：

 document.getElementById('questions').addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("question-text")) { tgt.closest(".questions").querySelector('.answer-text').classList.add('active'); } });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div id="questions"> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div> </div>

Answer 2

阅读代码中的注释以进行解释

 var getQuestions = document.querySelectorAll('.questions'); getQuestions.forEach(function(question) { question.addEventListener('click', function(e) { var target = e.target; // change the line: // var answer = target.getElementsByClassName('answer-text'); // to the following: var answer = this.closest('.questions').querySelector('.answer-text'); // what happens is: it goes up the DOM to the closest question // from where the click happened and looks inside the .questions for the .answer-text element answer.classList.add('active'); }) });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div>

Answer 3

检查您的html文件， answer-text属于.questions元素而不是.question-text元素。

因此，在每个.question-text单击事件处理程序上，要获得所选问题的答案，您需要获取所选.question-text的parentElement并在该父元素上找到answer 。

并且getElementsByClassName返回HTMLCollection所以answer[0]将返回目标答案元素。

 var getQuestions = document.querySelectorAll('.questions'); getQuestions.forEach(function(question) { question.addEventListener('click', function(e) { var target = e.target; var answer = target.parentElement.getElementsByClassName('answer-text'); answer[0].classList.add('active'); }) });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div>