Question

我有一个小应用程序从JSON文件中获取欧洲国家的失业率。它显示在地图上，每个国家都有一个小球，当它盘旋时显示该国的失业率。球的大小取决于各国的失业率。现在我还想做的是根据国家的失业率改变球的背景颜色。这是一个JSFiddle，所以你们可以更好地理解应用程序：

http://jsfiddle.net/RSEyg/9/

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

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

Answer 2

这是解决方案。

请注意，内联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');
        }
    });
});

小提琴：http://jsfiddle.net/RSEyg/10/

根据边框宽度设置背景颜色

2 个答案: