我有一个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>
就像上面的图片一样,我想把我的文字和数字放在同一种颜色
答案 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'}