如何一次一次改变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() {&nbsp; $(this).css('background-color', '#b8daff');&nbsp; $(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() {&nbsp; $(this).css('background-color', '#b8daff');&nbsp; $(this).parent().find(".wrong").css('background-color', '#f5c6cb');});.correct,.wrong {&nbsp; padding: 5px;&nbsp; text-align: center;&nbsp; background-color: #b1dfbb;&nbsp; border: solid 1px #c3c3c3;&nbsp; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>QUESTION</p><div class="question">&nbsp; <div class="d-flex inline">&nbsp; &nbsp; <div class="w-50 correct">A. Correcrt Answer</div>&nbsp; &nbsp; <div class="w-50 wrong">B. Wrong answer </div>&nbsp; </div></div><p>QUESTION</p><div class="question">&nbsp; <div class="d-flex inline">&nbsp; &nbsp; <div class="w-50 wrong">A. Wrong answer </div>&nbsp; &nbsp; <div class="w-50 correct">B. Correcrt Answer</div>&nbsp; </div></div><p>QUESTION</p><div class="question">&nbsp; <div class="d-flex inline">&nbsp; &nbsp; <div class="w-50 wrong">A. Wrong answer </div>&nbsp; &nbsp; <div class="w-50 wrong">B. Wrong answer </div>&nbsp; &nbsp; <div class="w-50 correct">C. Correcrt Answer</div>&nbsp; &nbsp; <div class="w-50 wrong">D. Wrong answer </div>&nbsp; </div></div>更新：（&nbsp;正如卡斯滕在下面的评论中所问的那样）大概正确的答案并不总是第一个答案（那不会很有效！） - 如果问题的答案超过 2 个，甚至是下一个答案。我建议这种方法而不是仅仅使用这种方法的原因next()是因为它会找到错误的答案，无论它在哪里或有多少其他问题的答案（例如，如果你有 2 或 3 个错误答案它仍然有效）

Answer 3

这应该适合你：$(".correct").click(() => {&nbsp; $(this).css('background-color', '#b8daff');&nbsp; $(this).next().css('background-color', '#f5c6cb');});