jQuery - 根据答案更改 div 背景颜色

发布于 2025-01-11 09:29:20 字数 703 浏览 0 评论 0原文

我想根据答案更改背景颜色我将正确答案隐藏在页面内的标签中。

 <label id="correctanswer" name="1" class="rb" style="display:none;">Tom</label>
 <label id="correctanswer" name="1" class="rb" style="display:none;">Liza</label>

我的代码中有两个问题（请检查jsfiddle）

我想在用户标记相关答案后单击“提交”按钮后更改答案的背景颜色。

但即使用户选择了正确的答案，背景颜色也会变成红色。

另外，我不希望它看起来像这样。

只有所选答案的背景由用户应为绿色或红色，其他颜色不应改变。

我希望它看起来像这样。

请检查代码；

http://jsfiddle.net/p9vgcuae/2/

原文

I want to change background-color according to answer
I hide the correct answer in the label inside the page.

 <label id="correctanswer" name="1" class="rb" style="display:none;">Tom</label>
 <label id="correctanswer" name="1" class="rb" style="display:none;">Liza</label>

I have 2 questions in the code (please check the jsfiddle)

I want to change the background color of the answers after the user clicks the "Submit" button after marking the relevant answer.

But even if the user chooses the correct answer, the background color get red.

Also, I don't want it to look like this.

Only the background of the answer chosen by the user should be green or red, other colors should not change.

I want it to look like this.

Please check the codes;

http://jsfiddle.net/p9vgcuae/2/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫七 2025-01-18 09:29:20

这很混乱，但它有效，应该给你一个更合乎逻辑的方法。
基本上循环遍历所有检查的输入并将用户输入与其正确答案进行比较，然后更改其背景颜色...

$('#correctAnswer').click(function() {
  var checkedInputs = $(this).parents().find(":checked")
  checkedInputs.each(function() {
    var answer = $(this).parent().parent().parent().find('#correctanswer').text()
    if ($(this).val() === answer) {
        $(this).parent().addClass('confirmed')
    } else {
        $(this).parent().css('background-color','red')
    }
  })
});

我建议您使用数据属性而不是类和 id 来改进您的组织

This is messy but it works, should give you a more logical approach.
Basically looping through all the checked inputs and comparing user inputs to their correct answer, then changing their background color...

$('#correctAnswer').click(function() {
  var checkedInputs = $(this).parents().find(":checked")
  checkedInputs.each(function() {
    var answer = $(this).parent().parent().parent().find('#correctanswer').text()
    if ($(this).val() === answer) {
        $(this).parent().addClass('confirmed')
    } else {
        $(this).parent().css('background-color','red')
    }
  })
});

I suggest you use data attributes instead of classes and ids to improve your organization

回复收藏 0 原文

~没有更多了~