Comment utiliser jquery pour faire défiler les éléments de couleur bg lors d'un clic et réinitialiser le clic d'un autre élément - jquery, html, css

Je suis donc en train de configurer un changeur d’arrière-plan à des fins d'accessibilité pour un client.

Ce que je veux, c'est que l'élément cliqué devienne blanc (c'est-à-dire une option de réinitialisation) au clic.

Mais avec le code que j'ai, si vous cliquez sur un autre, il devient blanc, sans réinitialiser l'autre, de sorte que vous vous retrouvez avec tout un tas de divs blancs.

voici mon code:

<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);
}

et 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");
});

});

Quelqu'un a-t-il des idées sur la manière de mettre en œuvre ce changement, de sorte que si je change de bg_one, puis bg_two, je peux réinitialiser bg_one à la couleur d'arrière-plan d'origine?

Je ne peux pas imaginer un moyen de faire cela sans stocker une tonne de variables, il doit sûrement y avoir quelque chose de plus facile ...

Réponses:

2 pour la réponse № 1

Une solution serait de définir une variable globale quicontient l'élément sélectionné et la couleur de l'élément sélectionné. Lorsque vous cliquez sur un autre élément, l'élément sélectionné et la couleur précédemment sélectionnés sont redéfinis à l'aide de ces variables.

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

---

0 pour la réponse № 2

Vous pouvez enregistrer la couleur d'arrière-plan par défaut de chaque élément dans ses données, puis restaurer l'événement de clic:

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

---