我是這個世界的新手，發現自己處在一個非常陡峭的學習曲線上。到目前為止，我已經通過瀏覽這個網站設法解決了所有問題，但是這個讓我感到難過！我已經給了它一整天，但無法取得進展，所以我希望有人能提供幫助。我有 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>這是它當前在屏幕上的樣子（一旦我的代碼工作，復選框將被隱藏：學生頁面
1 回答
楊魅力
TA貢獻1811條經驗 獲得超6個贊
您只需要使用當前上下文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>
- 1 回答
- 0 關注
- 134 瀏覽
添加回答
舉報
0/150
提交
取消