javascript - 检查具有相同类的两个元素的两个ID是否相等

我的HTML看起来像这样：

<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<p class="question" id="q1">QUESTION1</p>
<p class="answer" id="q1">ANSWER1</p>
<p class="question" id="q2">QUESTION2</p>
<p class="answer" id="q2">ANSWER2</p>

JavaScript / jQuery如下所示：

$('.question').on("click",function() {
    if ($('.answer').css('display') === 'none') {
        $('.answer').css({'display': 'block',});
    } else {
        $('.answer').css({'display': 'none',});
    }
});

问题是如何检查ID是否相等，以便仅更改一个答案而不是全部答案的显示？

最佳答案

就像gforce301告诉您的那样，该ID必须是唯一的，您可以使用以下解决方案：

$(document).ready(function() {
  $('.question').on("click", function() {
    if ($(this).next('.answer').css('display') === 'none') {
      $(this).next('.answer').css({ 'display': 'block' });
    } else {
      $(this).next('.answer').css({ 'display': 'none' });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="dictionaryTitle">Intrebari frecvente</h1>

<p class="question" id="q1">QUESTION1</p>
<p class="answer" id="q1">ANSWER1</p>

<p class="question" id="q2">QUESTION2</p>
<p class="answer" id="q2">ANSWER2</p>

关于javascript - 检查具有相同类的两个元素的两个ID是否相等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43740756/