在jQuery中更改多个标签的背景颜色

Question

单击答案后，我试图更改背景颜色：如果答案是正确的，则仅需要将其背景颜色更改为绿色，如果错误，则将其更改为绿色。 将正确答案的背景颜色更改为绿色，并将所选输入更改为红色。 我可以针对第一个问题提出建议，但是对于将下一个问题的真实答案的背景更改为绿色，它不起作用。 这是我的代码：[jsfiddle] https://jsfiddle.net/zftbgoa5/1/

  jQuery(document).ready(function(){ jQuery('input[data-key="a"]').click(function(){ if (jQuery(this).is(':checked')) { $(this).closest("label").css("background-color", "red"); jQuery("#true").css("background-color", "green"); } }); jQuery('input').click(function(){ if (jQuery(this).is(':checked')) { jQuery("#true").css("background-color", "green"); } }); jQuery('input[data-key="c"]').click(function(){ if (jQuery(this).is(':checked')) { $(this).closest("label").css("background-color", "red"); } document.getElementById("true").style.backgroundColor = "green";}); jQuery('input[data-key="d"]').click(function(){ if (jQuery(this).is(':checked')) { $(this).closest("label").css("background-color", "red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio"/>38.2</label></li> <li><label id="true"><input data-key="b" type="radio"/>38.2</label></li> <li><label><input data-key="c" type="radio"/>38.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label id="true"><input data-key="a" type="radio"/>38.2</label></li> <li><label><input data-key="b" type="radio"/>34.1</label></li> <li><label><input data-key="c" type="radio"/>29.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> 

Answer 1

I have solution for you

jsfiddle

jQuery was not working properly for you. I have shorten it up.

如果我花更多的时间，我可以做得更好，但是直到他们解决问题为止

Answer 2

这是您所需要的吗？ 如果单击正确的答案，它将变为绿色。 如果单击了错误的答案，它将变成红色，并且正确的答案会以绿色点亮。

我使用类来确定正确的答案，您也应该这样做。 具有相同id地方不止一个，这是非常不好的做法。

您还应该使用jQuery或$来使用jQuery。 无论如何，它引用同一件事。 仅使用两者之一可以使代码更加一致并且易于遵循。

缓存元素也很重要。 看一下clickedLabel = $(this).parent() 。 我将<label>存储在clickedLabel ，然后使用存储的值。 如果我只是到处都执行$(this).parent() ，那么我将进行不必要的DOM操作，这些操作通常非常昂贵。

我还建议您查看此内容以了解有关<label>更多信息。

 $(document).ready(function() { $("input").click(function() { var clickedLabel = $(this).parent(), correctLabel = $(this).closest("ul").find("label.true"); correctLabel.css("background-color", "green"); if (!clickedLabel.hasClass("true")) { clickedLabel.css("background-color", "red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio"/>38.2</label></li> <li><label class="true"><input data-key="b" type="radio"/>38.2</label></li> <li><label><input data-key="c" type="radio"/>38.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" type="radio"/>38.2</label></li> <li><label><input data-key="b" type="radio"/>34.1</label></li> <li><label><input data-key="c" type="radio"/>29.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> 

Answer 3

更新小提琴

只需在change检查父标签是否具有true类，即可将其change绿色。 如果不是红色，则找到真正的标签，然后将颜色变为绿色。

$(document).ready(function(){
$('input[type="radio"]').change(function(){
    if (!$(this).closest('label').hasClass('true')){
         $(this).closest("label").css("background-color", "red");
         $(this).parents('.answers').find("label.true").css("background-color", "green");
    } else{
       $(this).closest("label").css("background-color", "green");
  }
 });
});

Answer 4

请尝试这个

<div class="questionContainer hide">
    <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
    </div>
      <ul class="answers">
        <li><label class="correct"><input data-key="correct" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.1</label></li>
    </ul>
        </div>
           <div class="questionContainer hide">
    <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
        <ul class="answers">
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="correct"><input data-key="correct" type="radio"/>34.1</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.1</label></li>
    </ul>             
</div>
           <div class="questionContainer hide">           
    <!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div>
    <ul class="answers">
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>34.1</label></li>
        <li><label class="correct"><input data-key="correct" type="radio"/>29.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.1</label></li>
    </ul>
</div> 
           <div class="questionContainer hide">
    <!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div>
  <ul class="answers">
        <li><label class="wrong"><input data-key="wrong" type="radio"/>38.2</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>34.1</label></li>
        <li><label class="wrong"><input data-key="wrong" type="radio"/>29.2</label></li>
        <li><label class="correct"><input data-key="correct" type="radio"/>29.1</label></li>
    </ul>
</div>     

并在jQuery中

   jQuery(document).ready(function(){
jQuery('input[type="radio"]').click(function(){

if (jQuery(this).is(':checked'))
{
//alert($(this).attr('data-key'));
 if($(this).attr('data-key')=='wrong')
 {
  $(this).closest("label").css("background-color", "red");
  $(this).closest(".answers").find('.correct').css("background-color", "green");
  }
 else
 {
  $(this).closest("label").css("background-color", "green");
  }
}
 });

}）;

Answer 5

首先，我建议您更改标记以为无线电输入编写正确的html。 然后是js代码。 删除id true因为它无效。 而不是我使用类。 在每个答案上，我都针对正确的答案和用户答案。 然后比较结果。

 jQuery(document).ready(function(){ $('input[type="radio"]').on('change', function() { var answerInput = $(this).closest('ul.answers').find('li label.true input'); var selectedInput = $(this).closest('ul.answers').find('input[type="radio"]:checked'); if(selectedInput.val() != answerInput.val()){ $(selectedInput).closest('label').css("background-color", "red"); // wrong answer $(answerInput).closest('label').css("background-color", "green"); // correct answer }else{ $(selectedInput).closest('label').css("background-color", "green"); // correct answer } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio" value="38.2"/>38.2</label></li> <li><label class="true"><input data-key="b" value="38.3" type="radio"/>38.3</label></li> <li><label><input data-key="c" type="radio" value="38.2"/>38.2</label></li> <li><label><input data-key="d" type="radio" value="29.1"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" type="radio" value="38.2"/>38.2</label></li> <li><label><input data-key="b" type="radio" value="34.1"/>34.1</label></li> <li><label><input data-key="c" type="radio" value="29.2"/>29.2</label></li> <li><label><input data-key="d" type="radio" value="29.1"/>29.1</label></li> </ul> </div> </div> 

Answer 6

要处理输入广播组，需要使用相同的字符串（此处为question1和question2）设置属性标识和名称 。 仅选中输入的值将被发送到服务器。

您无需按答案添加事件，只需一个具有相同逻辑的事件就足够了。

使用html中的硬编码好答案的这种方法要小心，任何使用开发人员工具查看html DOM的人都可以看到哪个选项是一个好选择！

最好将结果发送到服务器（ajax调用），如果选中的选项是好的答案，则由服务器返回。 但这需要更多的时间来实施。

 jQuery(document).ready(function(){ // Add a click event on all input radio jQuery('input[type="radio"]').click(function(){ var inputEvent = jQuery(this); // Check if clicked input is checked if (inputEvent.is(':checked')) { // Check if clicked input is good answer if (inputEvent.prop('good-answer') === true) { // Set click input parent label in green inputEvent.closest("label").css("background-color", "green"); } else { // Set click input parent label in red inputEvent.closest("label").css("background-color", "red"); // Set good-answer parent label to green inputEvent.closest("ul").find('.good-answer').closest("label").css("background-color", "green"); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?</div> <ul class="answers"> <li><label><input id="question1" name="question1" value="a" type="radio"/>38.2</label></li> <li><label><input id="question1" name="question1" value="b" type="radio" class="good-answer"/>38.2</label></li> <li><label><input id="question1" name="question1" value="c" type="radio"/>38.2</label></li> <li><label><input id="question1" name="question1" value="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label><input id="question2" name="question2" type="radio"/>38.2</label></li> <li><label><input id="question2" name="question2" type="radio"/>34.1</label></li> <li><label><input id="question2" name="question2" type="radio" class="good-answer"/>29.2</label></li> <li><label><input id="question2" name="question2" type="radio"/>29.1</label></li> </ul> </div> 

Answer 7

好了，您需要更改两个重要的内容来解决您的问题。

一个-这是一个单选按钮。 因此，一次只需要检查每个答案之一 。 但目前您可以同时单击并检查每个问题下的所有答案，这是不正确的。

要解决此问题，您需要使用name属性将每个问题下的单选按钮分组，如下所示：

    <ul class="answers">
        <li>
          <label>
            <input data-key="a" name="one" type="radio"/>
            38.2
          </label>
        </li>
        <li>
          <label class="true">
            <input data-key="b" name="one" type="radio"/>
            38.2
          </label>
        </li>
        <li>
          <label>
            <input data-key="c" name="one" type="radio"/>
            38.2
          </label>
        </li>
        <li>
          <label>
            <input data-key="d" name="one" type="radio"/>
            38.2
          </label>
        </li>
    </ul>

同样，将每组无线电输入以其自己的组（问题） name分组。

二-您的JQuery显然需要改进。

$(document).ready(function(){
  $('input').click(function() {
    var closestLabel = $(this).closest("label");
    var currentQuestion = $(this).closest(".answers")

    // to clear all previous selections bg color
    currentQuestion.find('label').css("background-color", "initial");

    if (closestLabel.hasClass('true')) {
      // if checked is correct
      closestLabel.css("background-color", "green");
    } else {
      // if checked is wrong, find the correct under this question
      currentQuestion.find('.true').css("background-color", "green");
      // currently checked to background red
      closestLabel.css("background-color", "red");
    }
  });
});

代替id使用class="true"

这是小提琴

 $(document).ready(function(){ $('input').click(function() { $(this).closest(".answers").find('label').css("background-color", "initial"); if ($(this).closest("label").hasClass('true')) { $(this).closest("label").css("background-color", "green"); } else { $(this).closest(".answers").find('.true').css("background-color", "green"); $(this).closest("label").css("background-color", "red"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li> <label> <input data-key="a" name="one" type="radio"/> 38.2 </label> </li> <li> <label class="true"> <input data-key="b" name="one" type="radio"/>38.2</label></li> <li><label><input data-key="c" name="one" type="radio"/>38.2</label></li> <li><label><input data-key="d" name="one" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" name="two" type="radio"/>38.2</label></li> <li><label><input data-key="b" name="two" type="radio"/>34.1</label></li> <li><label><input data-key="c" name="two" type="radio"/>29.2</label></li> <li><label><input data-key="d" name="two" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div> <ul class="answers"> <li><label><input data-key="a" type="radio" name="three"/>38.2</label></li> <li><label><input data-key="b" type="radio" name="three"/>34.1</label></li> <li><label><input data-key="c" type="radio" name="three"/>29.2</label></li> <li><label class="true"><input data-key="d" type="radio" name="three"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div> <ul class="answers"> <li><label><input data-key="a" type="radio" name="four"/>38.2</label></li> <li><label><input data-key="b" type="radio" name="four"/>34.1</label></li> <li><label><input data-key="c" type="radio" name="four"/>29.2</label></li> <li><label class="true"><input data-key="d" type="radio" name="four"/>29.1</label></li> </ul> </div> 

Answer 8

试试这个刚刚删除的不需要的js代码，现在这些js更改将对所有人有效。 还向ul标签添加了id。

 $(document).ready(function(){ $('input').click(function(){ var id = $(this).closest(".answers").attr('id'); if ($(this).is(':checked')) { if ($(this).closest("label").attr('data-answer')) { $(this).closest("label").css("background-color", "green"); } else { $(this).closest("label").css("background-color", "red"); $('#'+id+' label[data-answer="true"]').css("background-color", "green"); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question">Airbus 300-600 tipi uçağın menzili ne kadardır?</div> <ul class="answers" id="answer1"> <li><label><input data-key="a" type="radio"/>38.2</label></li> <li><label data-answer="true"><input data-key="b" type="radio"/>38.2</label></li> <li><label><input data-key="c" type="radio"/>38.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers" id="answer2"> <li><label data-answer="true"><input data-key="a" type="radio"/>38.2</label></li> <li><label><input data-key="b" type="radio"/>34.1</label></li> <li><label><input data-key="c" type="radio"/>29.2</label></li> <li><label><input data-key="d" type="radio"/>29.1</label></li> </ul> </div> </div> 

Answer 9

• 首先将名称属性添加到单选按钮，以便只能选择一个单选按钮。
• 在jQuery中，找到单击的输入框父级，然后检查其是否具有“ true”类。
• 如果选择了错误的答案，请使用parent（）查找ul.answers，然后使用find（）查找label.true。
• 为了确保只能选择一个答案，一旦选择了一个答案，请禁用所有单选按钮。

 $(document).ready(function() { $("input").click(function() { var parentLabel = $(this).parent(); if (parentLabel.hasClass("true")) { parentLabel.css("background-color", "green"); parentLabel.parents ("ul.answers").find ("input").prop ("disabled", "true"); } else { $(parentLabel).parents ("ul.answers").find("label.true").css("background", "green"); parentLabel.css("background", "red"); parentLabel.parents ("ul.answers").find ("input").prop ("disabled", "true"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="questionContainer hide"> <!-- Question1--> <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır? </div> <ul class="answers"> <li><label><input data-key="a" type="radio" name="question1"/>38.2</label></li> <li><label class="true"><input data-key="b" type="radio" name="question1"/>38.2</label></li> <li><label><input data-key="c" type="radio" name="question1"/>38.2</label></li> <li><label><input data-key="d" type="radio" name="question1"/>29.1</label></li> </ul> </div> <div class="questionContainer hide"> <!-- Question2--> <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div> <ul class="answers"> <li><label class="true"><input data-key="a" type="radio" name="question2"/>38.2</label></li> <li><label><input data-key="b" type="radio" name="question2"/>34.1</label></li> <li><label><input data-key="c" type="radio" name="question2"/>29.2</label></li> <li><label><input data-key="d" type="radio" name="question2"/>29.1</label></li> </ul> </div>