如何使用jquery在单击时循环元素bg颜色，并在其他元素的单击时重置

因此，我为客户端设置了一个用于辅助功能的背景更改器。我有一套使用所需bg颜色的div，jQuery通过单击来更改正文背景。如何使用jquery在单击时循环元素bg颜色，并在其他元素的单击时重置

我想要的是单击的元素在点击时变成白色（即重置选项）。

但随着代码我有，如果你点击另一个，它也变成白色，没有重新设置其他，所以你最终得到了一大堆白色的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到它的原始背景颜色？

我不能想办法做，而无需存储变量吨，想必一定有什么更容易...

来源

2012-06-05 josh

的一种方法是设置一个全局变量保持选定的元素，和所选元素的颜色。当你点击另一个时，它使用这些变量设置以前选择的元素和颜色。

$(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'); 
    }); 

});

DEMO：http://jsfiddle.net/AY2B3/2/

来源

2012-06-05 11:09:01 N1ck

哈。很简单。谢谢N1ck！ – josh

可以保存其数据的每个元素的默认背景颜色，然后恢复上单击事件：

$(".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")); 
});

DEMO：http://jsfiddle.net/GLMkd/

来源

2012-06-05 11:05:47 VisioN

如何使用jquery在单击时循环元素bg颜色，并在其他元素的单击时重置

回答

相关问题