如何使用jquery在单击时循环元素bg颜色，并在单击另一个元素时重置

Question

所以我正在为客户端设置一个背景更改器以达到可访问性的目的。我有一组具有所需 bg 颜色的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重置为原始背景颜色？

我想不出在不存储大量变量的情况下做到这一点的方法，肯定有更简单的东西......

Answer 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/

Answer 2

您可以将每个元素的默认背景色保存在其数据中，然后在单击事件时恢复：

$(".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/