Comment faire fonctionner ces boutons à bascule un peu mieux?

Question

je la disposition DIV suivante qui se traduit par de petits boutons cliquables sur le navigateur:

<div class="ticket_option"> 
    <div class="tickets">2</div> 
    <div class="tickets">3</div> 
    <div class="tickets">4</div>  
</div> 

Utilisation de la Jquery suivante:

// ticket button stuff 
$('.tickets').toggle(function() { 

    $(this).addClass('active'); 

}, function(){ 

    $(this).removeClass('active'); 

}); 

Cela fonctionne un régal ... quand je clique sur le div , il ajoute la classe CSS 'active' et j'ai le résultat souhaité.

Cependant ... ce que je veux faire est que si l'un est basculé à l'état 'actif' et que je clique sur un autre, il supprime la classe 'active' de tous les autres DIV avec la classe 'tickets' MAIS seulement dans le contexte du parent DIV.ticket_option. Il existe plusieurs options ticket avec les mêmes numéros de tickets à choisir. Actuellement, avec le code ci-dessus, plusieurs div.tickets peuvent être 'actifs' dans la même div.ticket_option mais le but est d'avoir seulement 1 actif à tout moment. Comment fonctionne-t-on avec la fonction de bascule?

Answer 1

$('.tickets').click(function(){ 
    $(this).toggleClass('active').siblings().removeClass('active'); 
}); 

En outre, si vous ajoutez une classe à chacun des div s à l'intérieur ticket_option, alors sûrement .ticket_option div fonctionnerait mieux.

Modifier: Je suppose que toggleClass() fonctionnerait ici.

Answer 2

Pensez à utiliser jQuery UI avec le plugin bouton en mode radio: http://jqueryui.com/demos/button/#radio

Le balisage HTML est "normal" (un <input type="radio">) et le plug-in prend soin d'appliquer le comportement que vous voulez.