1

因此，我正在为客户设置一个背景更换器，以实现可访问性。我有一组具有所需 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 重置为其原始背景颜色？

如果不存储大量变量，我想不出一种方法来做到这一点，肯定有更简单的东西......

4

2 回答 2

2

一种方法是设置一个全局变量来保存选定元素和选定元素的颜色。当您单击另一个时，它会使用这些变量设置先前选择的元素和颜色。

$(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 回答