首頁猿問如何一次一次改變div的顏色？關于...

如何一次一次改變div的顏色？關于在 jQuery 中選擇規則的問題

JavaScript

偶然的你 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貢獻1779條經驗獲得超6個贊

做這個：

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

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

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

});

反對回復 2023-01-06

智慧大石

TA貢獻1946條經驗獲得超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;

}

<p>QUESTION</p>

<div class="w-50 correct">A. Correcrt Answer</div>

<div class="w-50 wrong">B. Wrong answer </div>

</div>

<p>QUESTION</p>

<div class="w-50 wrong">A. Wrong answer </div>

<div class="w-50 correct">B. Correcrt Answer</div>

</div>

<p>QUESTION</p>

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

更新：（ 正如卡斯滕在下面的評論中所問的那樣）

大概正確的答案并不總是第一個答案（那不會很有效！） - 如果問題的答案超過 2 個，甚至是下一個答案。

我建議這種方法而不是僅僅使用這種方法的原因next()是因為它會找到錯誤的答案，無論它在哪里或有多少其他問題的答案（例如，如果你有 2 或 3 個錯誤答案它仍然有效）

反對回復 2023-01-06

蕭十郎

TA貢獻1815條經驗獲得超13個贊

這應該適合你：

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

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

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

});

反對回復 2023-01-06

3 回答
0 關注
167 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何一次一次改變div的顏色？關于在 jQuery 中選擇規則的問題

如何一次一次改變div的顏色？關于在 jQuery 中選擇規則的問題

3 回答

添加回答

如何一次一次改變div的顏色？關于在 jQuery 中選擇規則的問題