我有一个小应用程序从JSON文件中获取欧洲国家的失业率。它显示在地图上,每个国家都有一个小球,当它盘旋时显示该国的失业率。球的大小取决于各国的失业率。现在我还想做的是根据国家的失业率改变球的背景颜色。这是一个JSFiddle,所以你们可以更好地理解应用程序:
jQuery的背景:
$('.dataPt').each(function(){
var border = $(this).css("border-width");
border = parseInt(border);
if(border < 10){
$(this).css("background","yellow");
}
else if(border < 16){
$(this).css("background","pink");
}
else if(border < 21){
$(this).css("background","black");
}
else if(border < 30){
$(this).css("background","blue");
}
});
答案 0 :(得分:1)
重新排列if
块,或使用else if
。 (如果您重新检查逻辑,则会看到如果以上任何条件为真,则每个if
条件将始终为真。)另外,在$(this)
函数内使用each
而不是再次使用选择器。 同样作为渲染圈子的怪癖,您需要设置border-color
,而不是background-color
。
E.g。
if(border < 10){
$(this).css("border-color","yellow");
}
else if(border < 15){
$(this).css("border-color","pink");
}
else if(border < 20){
$(this).css("border-color","black");
}
else if(border < 30){
$(this).css("border-color","blue");
}
您也可以简单地将支票从30降到10,但如果css
小于10,则需要将border
属性设置为4次。
答案 1 :(得分:1)
这是解决方案。
请注意,内联background-color
不正确,因为此处将着色定义为border-color
。以下解决了您的逻辑问题,并包含CSS修复:
$('.dataPt').each(function () {
$(this).hover(function () {
var border = $(this).css("border-width");
border = parseInt(border);
if (border >= 25) {
$(this).css("border-color", "blue");
} else if (border >= 15 && border < 25) {
$(this).css("border-color", "black");
} else if (border < 15 && border >= 10) {
$(this).css("border-color", "pink");
} else {
$(this).css('border-color', 'red');
}
});
});