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

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

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

$（'.dataPt'）。每个（函数（）{
var border=$（this.css（“边框宽度”）；
border=parseInt（border）；
如果（边框<10）{
$（this.css（“背景”、“黄色”）；
}
否则如果（边框<16）{
$（this.css（“背景”、“粉色”）；
}
否则如果（边框<21）{
$（this.css（“背景”、“黑色”）；
}
否则，如果（边框<30）{
$（this.css（“背景”、“蓝色”）；
}
});  

重新排列

if

块，或使用

else if

。（如果重新检查您的逻辑，您将看到，如果前面的任何条件为真，则每个

If

条件将始终为真。）此外，在

每个
函数中使用
$（this）
，而不是再次使用选择器另外作为渲染圆的一个技巧，您需要设置
边框颜色
，而不是
背景颜色

例如

if（边框<10）{
$（this.css（“边框颜色”、“黄色”）；
}
否则，如果（边框<15）{
$（this.css（“边框颜色”、“粉色”）；
}
否则，如果（边框<20）{
$（this.css（“边框颜色”、“黑色”）；
}
否则，如果（边框<30）{
$（this.css（“边框颜色”、“蓝色”）；
}

您也可以简单地将检查从30安排到10，但是如果
border
小于10，则这将需要设置
css
属性四次

请注意，内联
背景色
不正确，因为此处的颜色定义为
边框颜色
。以下内容解决了您的逻辑问题，并包括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');
        }
    });
});

$（'.dataPt'）。每个（函数（）{
$（this）.hover（函数（）{
var border=$（this.css（“边框宽度”）；
border=parseInt（border）；
如果（边框>=25）{
$（this.css（“边框颜色”、“蓝色”）；
}否则如果（边框>=15&&border<25）{
$（this.css（“边框颜色”、“黑色”）；
}否则如果（边框<15&&border>=10）{
$（this.css（“边框颜色”、“粉色”）；
}否则{
$（this.css（'border-color'，'red'）；
}
});
});

小提琴：
谢谢你；然而，这并没有改变任何东西，它们都是蓝色的原因是因为css的默认颜色是蓝色啊，好的。我知道怎么了。您在
中使用
$（'.dataPt'）
，而您应该只使用
$（此）
。我之前就有过这样的情况，并结束了将其更改为.dataPt以查看它是否能修复问题OK，您一定还有另一个问题。我来看看小提琴。好了，看起来你现在有了解决方案。我检查了你的小提琴，所有的点都是蓝色的，这是一个与你的问题无关的问题。我想我找到了更好的解决方案，一秒钟。你的背景色被挡住了。颜色在边界上，而不是背景中。我修正了答案并更新了小提琴。谢谢，我刚检查了你的小提琴，但它们仍然是蓝色的
$('.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');
        }
    });
});