Question

我的 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是否相等，以便我只能更改其中一个答案的显示而不是全部？

Answer 1

正如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>

Answer 2

您不希望将其与id进行关联，因为它们必须是唯一的。相反，为此目的创建一个属性，然后你可以检查它们。

HTML

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

的jQuery

$('.question').on("click", function() {
    $('.answer').css({'display': 'none',})
    $('.answer[data-question="' + $(this.attr('data-question') + '"]')).css({'display': 'block',});
});

所以我们在这里做的是当你点击一个问题，隐藏所有答案，然后显示data-question属性与问题的data-question属性匹配的答案。

Answer 3

ID在html中应该是唯一的无论如何，你可以使用以下解决方法使其工作

$('.question').on("click",function() {
    $id = "#"+$(this).attr('id');
if ($($id+'.answer').css('display') === 'none') {

        $($id+'.answer').css({'display': 'block',});
        }
        else {
            $($id+'.answer').css({'display': 'none',});
        }
});

Answer 4

您可以将“答案”放在“问题”中，这样您就可以使用以下内容显示/隐藏：

$(this).find(".answer")

请参见以下示例：

$('.question').on("click",function() {
    if ($(this).find('.answer').css('display') === 'none') {
        $(this).find('.answer').css({'display': 'block',});
    } else {
        $(this).find('.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>
<div class="question" id="q1">QUESTION1
  <p class="answer" id="q1">ANSWER1</p>
</div>
<div class="question" id="q2">QUESTION2
  <p class="answer" id="q2">ANSWER2</p>
</div>

我希望它可以帮助你，再见。

Answer 5

你可以使用jQuery .next()在问题后立即得到答案。您还可以在使用.hide()

显示答案之前隐藏所有答案

$('.question').on("click",function() {
    $(".answer").hide();
    $(this).next().show();
});

jsfiddle

Answer 6

如上所述，正确的编码方式是使用唯一ID。一个好方法是使用div来正确分离问题和答案。

这里有一个小提示，向您展示一个很好的方法。（请记住，这不是最好的方式，只是更好的方式（和工作））

HTML

y : array-like, shape = [n_samples]

JQUERY

<h1 id="dictionaryTitle">Intrebari frecvente</h1>

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

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

DEMO

Answer 7

id属性值必须是唯一的。要避免此问题，您可以将问题和答案包装在ID为q1，q2等的div中。

这是一个片段：

$('div .question').on("click",function() {
    var $answer = $(this).next('.answer');
    
    if ($answer.css('display') === 'none') {
        $answer.css({'display': 'block',});
    } else {
        $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>
<div id="q1">
  <p class="question">QUESTION1</p>
  <p class="answer">ANSWER1</p>
</div>

<div id="q2">
  <p class="question">QUESTION2</p>
  <p class="answer">ANSWER2</p>
</div>

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

7 个答案:

HTML

的jQuery

HTML

JQUERY