1

そのため、クライアントのアクセシビリティを目的として、バックグラウンド チェンジャーを設定しています。必要な背景色の div のセットと、クリック時にボディの背景を変更する jQuery があります。

私が望むのは、クリックした要素がクリック時に白に変わることです(つまり、リセットオプション)。

しかし、私が持っているコードでは、別のものをクリックすると、他のものをリセットせずに白くなり、白いdivがたくさんできてしまいます。

ここに私のコードがあります:

<div class="bg_changer">
                <ul><li class="bg_1 bg_setter"><a >bg_one</a></li>
                <li class="bg_2 bg_setter" ><a >bg_two</a></li>
                <li class="bg_3 bg_setter"><a >bg_three</a></li>
                <li class="bg_4 bg_setter"><a >bg_four</a></li>
                <li class="bg_5 bg_setter"><a >bg_five</a></li>
                <li class="bg_6 bg_setter"><a >bg_six</a></li>

                </ul>

</div><!-- end of bg_changer -->

CSS

.bg_1{
    background-color: rgba(204,204,204,1);
}
.bg_2{
    background-color: rgba(254,254,196,1);
}
.bg_3{
    background-color: rgba(253,190,130,1);
}
.bg_4{
    background-color: rgba(253,253,128,1);
}
.bg_5{
    background-color: rgba(158,208,253,1);
}
.bg_6{
    background-color: rgba(218,218,254,1);
}

とjQ

$(document).ready(function(){
    $(".bg_setter").click(function() {
      var bg_new =  $(this).css('background-color');
        $("body").css('background-color', bg_new);
        $(this).css('background-color', 'white');
    });

});

この変更を実装する方法についてアイデアを持っている人はいますか? bg_one を切り替えてから bg_two を切り替えると、bg_one を元の背景色にリセットできますか?

大量の変数を保存せずにこれを行う方法は考えられません。確かにもっと簡単なものがあるはずです...

4

2 に答える 2

2

1 つの方法は、選択された要素と選択された要素の色を保持するグローバル変数を設定することです。別のものをクリックすると、それらの変数を使用して、以前に選択した要素と色が設定されます。

$(document).ready(function() {
    //global vars - nothing yet, no color has been selected
    var prev_element, prev_color;

    $(".bg_setter").click(function() {
        //if there has been a previously selected element - set it's color back
        if (prev_element) {
            prev_element.css('background-color', prev_color);
        }

        //Store this element and the current color
        prev_element = $(this);
        prev_color = $(this).css('background-color');

        //Update the body background color with the color selected
        $("body").css('background-color', prev_color);

        //set the selected element background color to white
        prev_element.css('background-color', 'white');
    });

});​

デモ: http://jsfiddle.net/AY2B3/2/

于 2012-06-05T11:09:01.233 に答える
0

各要素のデフォルトの背景色をデータに保存し、クリック イベントで復元できます。

$(".bg_setter").click(function() {
    var bg_new = $(this).css("background-color");
    $("body").css("background-color", bg_new);

    $(this).css("background-color", "white");
    $(this).siblings(".bg_setter").css("background-color", function(i, value) {
        return $(this).data("color");
    });
}).each(function() {
    $(this).data("color", $(this).css("background-color"));
});​

デモ: http://jsfiddle.net/GLMkd/

于 2012-06-05T11:05:47.140 に答える