3 回答

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊
做這個(gè) :
$(".correct ").click(function() {
$(this).css('background-color', '#b8daff');
$(this).next().css('background-color', '#f5c6cb');
});

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊
這行代碼正在選擇所有 wrong答案:
$(".wrong").css('background-color', '#f5c6cb');
您需要找到與問(wèn)題相關(guān)的錯(cuò)誤答案(而不僅僅是正確答案旁邊的答案)。您可以通過(guò)使用$(this).parent()to get the question 來(lái)做到這一點(diǎn),然后find(.wrong)會(huì)發(fā)現(xiàn)它的孩子有“錯(cuò)誤”的課程。
$(this).parent().find(".wrong").css('background-color', '#f5c6cb');
工作片段(已更新以顯示它適用于不同的訂單和多個(gè)選項(xiàng)):
$(".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>
更新:( 正如卡斯滕在下面的評(píng)論中所問(wèn)的那樣)
大概正確的答案并不總是第一個(gè)答案(那不會(huì)很有效?。?- 如果問(wèn)題的答案超過(guò) 2 個(gè),甚至是下一個(gè)答案。
我建議這種方法而不是僅僅使用這種方法的原因next()
是因?yàn)樗鼤?huì)找到錯(cuò)誤的答案,無(wú)論它在哪里或有多少其他問(wèn)題的答案(例如,如果你有 2 或 3 個(gè)錯(cuò)誤答案它仍然有效)

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊
這應(yīng)該適合你:
$(".correct").click(() => {
$(this).css('background-color', '#b8daff');
$(this).next().css('background-color', '#f5c6cb');
});
添加回答
舉報(bào)