0

我有一个小型应用程序，它从 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");
    }
});
4

2 回答 2

1

重新排列你的if块，或使用else if. （如果您重新检查您的逻辑，您会发现if如果前面的任何条件为真，则每个条件都将始终为真。）此外，$(this)在您的each函数内部使用而不是再次使用选择器。此外，作为如何渲染圆圈的一个怪癖，您需要设置border-color，而不是background-color.

例如

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，但是如果小于 10，这将产生css四次设置属性的成本。border

于 2013-11-05T19:39:47.850 回答
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');
        }
    });
});

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

于 2013-11-05T19:52:27.623 回答