使用 JQuery 更改具有相同 class 的所有 div 的 CSS 值，但前提是選中包含的復選框

Question

我是這個世界的新手，發現自己的學習曲線非常陡峭。 到目前為止，我已經設法通過瀏覽這個網站對所有問題進行了分類，但是這個讓我很難過。 我已經給了它一整天並且無法取得進展，所以我希望有人可以提供幫助。

我有兩個角色，學生和評估員。

學生完成作業，然后評估員對其進行標記，如果答案足夠，則勾選復選框。

學生然后查看他們的工作，應該會看到選中復選框的答案為綠色背景，未選中復選框則沒有背景。

目前，我的代碼正在更改具有相同 class 的所有 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>