Question

我有一个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>

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

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

Answer 2

您正在设置所有.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>

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

Answer 3

尝试以下脚本：

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

.each（）切换类不起作用

3 个答案: