.each()切换类不起作用

时间:2018-02-27 21:31:04

标签: javascript jquery

我有一个JavaScript .each()函数,它检查我的div标签的值并切换css类。我只是检查从我的数据库中获取的值并给出一个特定的颜色。

$(".c").each(function() {
     if ($(this).text() < 4) {
           $(".col").toggleClass("yellow");
     } else if ($(this).text() >= 4 && $(this).text() <=6) {
           $(".col").toggleClass("orange");
     } else if ($(this).text() >= 6 && $(this).text() <=10) {
           $(".col").toggleClass("red");
     }
});

问题是我运行的代码只有最后一个,如果是toggleClass(&#34; red&#39;)运行。我只得到一种颜色,在这种情况下是红色显示,不知道为什么。

我的HTML在php foreach循环中循环:

 <div class="col">
       <h4 class="c">'.$marks.'</h4>
       <h6>Marks</h6>
 </div> 
 <div class="col">
       <h4 class="c">'.$highest.'</h4>
       <h6>Highest</h6>
 </div> 

enter image description here

就像上面的图片一样,我想把我的文字和数字放在同一种颜色

3 个答案:

答案 0 :(得分:1)

您的代码会在所有.col元素上设置类。要仅隔离您匹配的那个,您需要使用 .closest() 来查找符合您条件的最近祖先。

$(".c").each(function() {
  if($(this).text() < 4){
    $(this).closest($(".col")).toggleClass("yellow");
  } else if ($(this).text() >= 4 && $(this).text() <=6){
    $(this).closest($(".col")).toggleClass("orange");
  } else if ($(this).text() >= 6 && $(this).text() <=10){
    $(this).closest($(".col")).toggleClass("red");
  }
});
.col { width: 5em; text-align:center; padding:1em; margin:5px; float:left; }
.yellow { background-color:yellow; }
.orange { background-color:orange; }
.red { background-color:red; }
h4, h6 { margin:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
       <h4 class="c">4</h4>
       <h6>Marks</h6>
 </div> 
 <div class="col">
       <h4 class="c">7</h4>
       <h6>Highest</h6>
 </div>
 <div class="col">
       <h4 class="c">2</h4>
       <h6>Highest</h6>
 </div>

答案 1 :(得分:1)

您正在设置所有.col元素。改为:

$(".c").each(function() {
     if($(this).text() < 4){
           $(this).parent().toggleClass("blue");
     } else if ($(this).text() >= 4 && $(this).text() <=6) {
           $(this).parent().toggleClass("orange");
     } else if ($(this).text() >= 6 && $(this).text() <=10) {
           $(this).parent().toggleClass("red");
     }
});
.red {
    color: red;
}
  
.blue {
    color: blue;
}
  
.orange {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
       <h4 class="c">2</h4>
       <h6>Marks</h6>
 </div> 
 <div class="col">
       <h4 class="c">5</h4>
       <h6>Highest</h6>
 </div>

我使用蓝色,以使差异更明显。

答案 2 :(得分:-2)

尝试以下脚本:

print('labels=%s' % repr(labels))

labels={'PS': 'Power', 'Min': 'Mining', 'Country': 'Country', 'SPS': 'Social', 'TC': 'Transport', 'SI': 'Service', 'Con': 'Construction', 'Fin': 'Finance', 'Agr': 'Agriculture', 'Man': 'Manufacturing'}