在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操作，而这些操作通常都很昂贵。

我还建议您查看this，了解<label>的更多信息。

＆＃13;

＆＃13;

$(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");
    }
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

更新Fiddle

简单地说，在change上检查父标签是否有类true使其变为绿色。如果不是红色并找到真正的标签并使颜色变为绿色。

$(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）设置属性 id 和名称。只有已检查输入的值才会发送到服务器。

您不需要通过回答添加事件，只有一个具有相同逻辑的事件就足够了。

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

Here is the Fiddle

$(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。

＆＃13;

＆＃13;

$(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");
        }
      }
    });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 9

• 首先将名称属性添加到单选按钮，以便只能选择一个单选按钮。
• 在jQuery中找到点击的输入框父项并检查它是否有＆＃34; true＆＃34;类。
• 如果选择了错误的答案，请使用parents（）查找ul.answers，然后使用find（）查找label.true。
• 为了确保只有一次选择答案，一旦选择了答案，就会禁用所有单选按钮。

＆＃13;

＆＃13;

$(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");
    }

  });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;