使用 JQuery 更改具有相同类的所有 div 的 CSS 值，但前提是选中包含的复选框

Question

我是这个世界的新手，发现自己处在一个非常陡峭的学习曲线上。到目前为止，我已经通过浏览这个网站设法解决了所有问题，但是这个让我感到难过！我已经给了它一整天，但无法取得进展，所以我希望有人能提供帮助。我有 2 个角色，学生和评估员。学生完成他们的工作，然后评估员对其进行标记，如果答案足够，则会勾选一个复选框。然后学生查看他们的作业，应该会看到带有已选中复选框的答案的绿色背景，未选中的则没有背景。目前我的代码正在更改具有相同类的所有 div 的背景颜色，无论复选框是否被选中。非常感谢任何关于我哪里出错的帮助。HTML 表单中的示例问题：$(document).ready(function() {  $('.answer').each(function() {    if ($(this).find('input.cb:checked').prop('checked')) {      $('.answer').css("background-color", "#a5de76");    }  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="text-left">1. Describe the procedures in place when a steward supervises spectator entry.</div><p></p><div class="answer"><textarea id="U1Q1" name="U1Q1" rows="5" cols="70"><?php echo htmlspecialchars($row['U1Q1'])?></textarea>  <?php echo '<input class="cb" type="checkbox" name="n" class="hidden" value="v"' . ($row['U1Q1R']==1 ? ' checked="checked"' : '') . '>';?>  <input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="<?php echo htmlspecialchars($row['U1Q1F'])?>" readonly /></div>这是它当前在屏幕上的样子（一旦我的代码工作，复选框将被隐藏：学生页面

Answer 1

您只需要使用当前上下文this并更改：

$('.answer').css("background-color", "#a5de76");

到

$(this).css("background-color", "#a5de76");

因此，只有当前选中的答案背景颜色被更改。

完整代码：

$(document).ready(function() {

  $('.answer').each(function() {

    if ($(this).find('input.cb').prop('checked')) {

      $(this).css("background-color", "#a5de76");

    }

  });

});

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

<div class="text-left">1. Describe the procedures in place when a steward supervises spectator entry.</div>

<p></p>

<div class="answer">

  <textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>

  <input class="cb" type="checkbox" name="n" class="hidden" value="v" checked>

  <input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />

</div>

<div class="answer">

  <textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>

  <input class="cb" type="checkbox" name="n" class="hidden" value="v">

  <input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />

</div>

<div class="answer">

  <textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>

  <input class="cb" type="checkbox" name="n" class="hidden" value="v" checked>

  <input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />

</div>