如何一次一次改变div的颜色？关于在 jQuery 中选择规则的问题

Question

我是 jquery 的新手。我对 jquery 中的选择规则感到困惑。我创建了 3 个问题并希望用户单击答案。颜色的 div 如果正确则变为蓝色，如果错误则变为红色。但是，如果我只是点击第一个问题的正确答案，错误答案的所有颜色也会改变。我应该怎么办？感谢观看，不胜感激！$(".correct ").click(function() {  $(this).css('background-color', '#b8daff');  $(".wrong").css('background-color', '#f5c6cb');});.correct,.wrong {  padding: 5px;  text-align: center;  background-color: #b1dfbb;  border: solid 1px #c3c3c3;  cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>QUESTION</p><div class="question">  <div class="d-flex inline">    <div class="w-50 correct">A. Correcrt Answer</div>    <div class="w-50 wrong">B. Wrong answer </div>  </div></div><p>QUESTION</p><div class="question">  <div class="d-flex inline">    <div class="w-50 correct">A. Correcrt Answer</div>    <div class="w-50 wrong">B. Wrong answer </div>  </div></div><p>QUESTION</p><div class="question">  <div class="d-flex inline">    <div class="w-50 correct">A. Correcrt Answer</div>    <div class="w-50 wrong">B. Wrong answer </div>  </div></div>演示图片

Answer 1

做这个 ：

$(".correct ").click(function() {

  $(this).css('background-color', '#b8daff');

  $(this).next().css('background-color', '#f5c6cb');

});

Answer 2

这行代码正在选择所有 wrong答案：

$(".wrong").css('background-color', '#f5c6cb');

您需要找到与问题相关的错误答案（而不仅仅是正确答案旁边的答案）。您可以通过使用$(this).parent()to get the question 来做到这一点，然后find(.wrong)会发现它的孩子有“错误”的课程。

$(this).parent().find(".wrong").css('background-color', '#f5c6cb');

工作片段（已更新以显示它适用于不同的订单和多个选项）：

$(".correct ").click(function() {

  $(this).css('background-color', '#b8daff');

  $(this).parent().find(".wrong").css('background-color', '#f5c6cb');

});

.correct,

.wrong {

  padding: 5px;

  text-align: center;

  background-color: #b1dfbb;

  border: solid 1px #c3c3c3;

  cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>QUESTION</p>

<div class="question">

  <div class="d-flex inline">

    <div class="w-50 correct">A. Correcrt Answer</div>

    <div class="w-50 wrong">B. Wrong answer </div>

  </div>

</div>

<p>QUESTION</p>

<div class="question">

  <div class="d-flex inline">

    <div class="w-50 wrong">A. Wrong answer </div>

    <div class="w-50 correct">B. Correcrt Answer</div>

  </div>

</div>

<p>QUESTION</p>

<div class="question">

  <div class="d-flex inline">

    <div class="w-50 wrong">A. Wrong answer </div>

    <div class="w-50 wrong">B. Wrong answer </div>

    <div class="w-50 correct">C. Correcrt Answer</div>

    <div class="w-50 wrong">D. Wrong answer </div>

  </div>

</div>

更新：（ 正如卡斯滕在下面的评论中所问的那样）

大概正确的答案并不总是第一个答案（那不会很有效！） - 如果问题的答案超过 2 个，甚至是下一个答案。

我建议这种方法而不是仅仅使用这种方法的原因next()是因为它会找到错误的答案，无论它在哪里或有多少其他问题的答案（例如，如果你有 2 或 3 个错误答案它仍然有效）

Answer 3

这应该适合你：

$(".correct").click(() => {

  $(this).css('background-color', '#b8daff');

  $(this).next().css('background-color', '#f5c6cb');

});