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

これが解決策です。

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 に答える
1

ifブロックを再配置するか、 を使用しますelse if。if(ロジックを再検討すると、前の条件のいずれかが true の場合、各条件が常に true になることがわかります。) また、セレクターを再度使用するのではなく、関数$(this)内で使用します。また、円をレンダリングする方法の癖として、ではなくを設定する必要があります。eachborder-colorbackground-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場合、プロパティを 4 回設定するコストがかかります。border

于 2013-11-05T19:39:47.850 に答える