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

Javascript 在jQuery中更改多个标签的背景颜色
javascript jquery html css
Javascript 在jQuery中更改多个标签的背景颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,点击答案后，我试图改变背景颜色：如果答案是正确的，那么只需要将其背景颜色改为绿色，如果答案是错误的；将正确答案的背景色更改为绿色，将所选输入更改为红色。我可以把第一个问题改成绿色，但在接下来的问题中将真实答案的背景改成绿色是行不通的。这是我的密码： [jsfiddle] jQuery（文档）.ready（函数（）{ jQuery（'input[data key=“a”]”）。单击（function（）{ if（jQuery（this）.is（':checked'））{ $（此）.最近的（“标
点击答案后，我试图改变背景颜色：如果答案是正确的，那么只需要将其背景颜色改为绿色，如果答案是错误的；将正确答案的背景色更改为绿色，将所选输入更改为红色。我可以把第一个问题改成绿色，但在接下来的问题中将真实答案的背景改成绿色是行不通的。这是我的密码： [jsfiddle]
jQuery（文档）.ready（函数（）{
jQuery（'input[data key=“a”]”）。单击（function（）{
if（jQuery（this）.is（':checked'））{
$（此）.最近的（“标签”）.css（“背景色”、“红色”）；
jQuery（“#true”）.css（“背景色”、“绿色”）；
}
});
jQuery（'input'）。单击（函数（）{
if（jQuery（this）.is（':checked'））{
jQuery（“#true”）.css（“背景色”、“绿色”）；
}
});
jQuery（'input[data key=“c”]”）。单击（function（）{
if（jQuery（this）.is（':checked'））{
$（此）.最近的（“标签”）.css（“背景色”、“红色”）；
}document.getElementById（“true”）.style.backgroundColor=“绿色”；}）；
jQuery（'input[data key=“d”]”）。单击（function（）{
if（jQuery（this）.is（':checked'））{
$（此）.最近的（“标签”）.css（“背景色”、“红色”）；
}
});
});

空中客车300-600 tipi uçağn menzili ne kadardır？

38.2
38.2
38.2
29.1

空中客车300-600 uçağnın maksimum yakıt hariçyükünedir？

38.2
34.1
29.2
29.1



如果我花更多的时间，我可以做得更好，但直到他们我已经解决了你的问题

如果我花更多的时间，我可以做得更好，但在他们来之前，我已经解决了你的问题
这是你需要的吗？如果单击正确答案，它将变为绿色。如果您单击错误的答案，它将变为红色，正确答案将以绿色亮起
我用课堂来确定正确答案，你也应该这样做。拥有相同的id
多个位置是非常糟糕的做法
您还应该使用jQuery
或$
来使用jQuery。它引用了同样的东西。只使用这两个选项中的一个，代码就更加一致且易于理解
缓存元素也很重要。查看clickedLabel=$（this）.parent（）
。我将
存储在单击标签中，然后使用存储的值。如果我在任何地方都执行$（this）.parent（）
，我将执行不必要的DOM操作，这通常非常昂贵
我还建议看一下，了解更多关于


$（文档）.ready（函数（）{
$（“输入”）。单击（函数（）{
var clickedLabel=$（this）.parent（），
correctLabel=$（this.closest（“ul”）.find（“label.true”）；
css（“背景色”、“绿色”）；
如果（！clickedLabel.hasClass（“true”））{
clickedLabel.css（“背景色”、“红色”）；
}
});
});

空中客车300-600 tipi uçağn menzili ne kadardır？

38.2
38.2
38.2
29.1

空中客车300-600 uçağnın maksimum yakıt hariçyükünedir？

38.2
34.1
29.2
29.1

这是您需要的吗？如果单击正确答案，它将变为绿色。如果您单击错误的答案，它将变为红色，正确答案将以绿色亮起
我用课堂来确定正确答案，你也应该这样做。拥有相同的id
多个位置是非常糟糕的做法
您还应该使用jQuery
或$
来使用jQuery。它引用了同样的东西。只使用这两个选项中的一个，代码就更加一致且易于理解
缓存元素也很重要。查看clickedLabel=$（this）.parent（）
。我将
存储在单击标签中，然后使用存储的值。如果我在任何地方都执行$（this）.parent（）
，我将执行不必要的DOM操作，这通常非常昂贵
我还建议看一下，了解更多关于


$（文档）.ready（函数（）{
$（“输入”）。单击（函数（）{
var clickedLabel=$（this）.parent（），
correctLabel=$（this.closest（“ul”）.find（“label.true”）；
css（“背景色”、“绿色”）；
如果（！clickedLabel.hasClass（“true”））{
clickedLabel.css（“背景色”、“红色”）；
}
});
});

空中客车300-600 tipi uçağn menzili ne kadardır？

38.2
38.2
38.2
29.1

空中客车300-600 uçağnın maksimum yakıt hariçyükünedir？

38.2
34.1
29.2
29.1

更新
简单地说，在change
上检查父标签是否具有classtrue
使其变为绿色。如果不是，则将其变为红色，找到真正的标签，并将颜色变为绿色
$(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");
  }
 });
});

更新
简单地说，在change
上检查父标签是否具有classtrue
使其变为绿色。如果不是，则将其变为红色，找到真正的标签，并将颜色变为绿色
$(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");
  }
 });
});

请试试这个
<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>     

}))
 请试试这个
<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>     

}))
 首先，我建议您更改标记，以便为无线电输入编写正确的html。然后是js代码。删除id true，因为它无效。相反，我用了课堂。
在每个答案上，我都以正确答案和用户答案为目标。然后比较结果

jQuery（文档）.ready（函数（）{
$（'input[type=“radio”]”）。在（'change'，function（）上{
变量
   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");
  }
}
 });

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

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