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

Question

我有一个小应用程序，它从 JSON 文件中获取欧洲国家的失业率。它显示在 map 中，每个国家上方都有一个小球，当鼠标悬停在上面时会显示该国家/地区的失业率。球的大小取决于各国的失业率。现在我还想做的是根据国家的失业率改变球的背景颜色。这是一个 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

这是解决方案。

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

fiddle :http://jsfiddle.net/RSEyg/10/