为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

偶然的你 2023-01-06 16:19:21

我是 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>

演示图片


查看完整描述

3 回答

?
哆啦的时光机

TA贡献1550条经验 获得超6个赞

做这个 :


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

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

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

});


查看完整回答
反对 回复 2023-01-06
?
智慧大石

TA贡献1720条经验 获得超3个赞

这行代码正在选择所有 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 个错误答案它仍然有效)


查看完整回答
反对 回复 2023-01-06
?
萧十郎

TA贡献1562条经验 获得超11个赞

这应该适合你:


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

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

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

});


查看完整回答
反对 回复 2023-01-06
  • 3 回答
  • 0 关注
  • 14 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信