DIVs actifs et inactifs en utilisant jQuery

Question

j'ai une palette de couleurs:

css

.colors {width:75px;height:75px;background-color:red;border:1px solid #000;} 
.highlight {width:75px;height:75px;background-color:red;border:2px solid #000;} 

html

<div class="colors">Red</div> 
<div class="colors">blue</div> 
<div class="colors">green</div> 

l'utilisateur censé choisir la couleur qu'il veut, donc je veux la frontière de la couleur choisie par l'utilisateur pour être 2px;

$("div").click(function() { 
    $(this).toggleClass("highlight"); 
}); 

ce travail est très bien, mais quand je clique sur anothe couleur l'ancienne couleur encore ACTIVÉE et quand je clique sur la même couleur devient inactif et je ne veux pas.

ce que je veux est:

1. changement frontière lorsqu'elle est active.
2. si je clique sur un autre l'ancien devient inactif.
3. quand je clique sur celui qui est actif à nouveau je dono't veux quelque chose que je veux arriver comme il a été actived.

Merci.

Answer 1

Qu'est-ce que vous voulez ressemblerait à ceci:

$("div").click(function() { 
    $(this).addClass("highlight").siblings().removeClass("highlight"); 
}); 

You can test it out here. Ce que cela fait est juste ajouter la classe sur un clic (pas l'activer afin qu'il puisse se détacher) par l'intermédiaire .addClass() puis ceux .siblings() obtenir la classe supprimée par .removeClass().

---

Si votre exemple est éteint et ils ne sont pas frères et soeurs, il suffit d'utiliser .removeClass() sur le même sélecteur que votre gestionnaire .click() avant de l'ajouter à l'élément cliquée, comme ceci:

$("div").click(function() { 
    $("div").removeClass("highlight"); 
    $(this).addClass("highlight"); 
});