avec jquery chacun et swich entre 2 choses

Question

first see this post i a ce code

$('.yesno').click(function(){ 
    $('.yesno').each(function(i, v){ 
     $(v).removeClass('selected'); 
    }); 
    $(this).addClass('selected'); 

    return false; 
}); 

et html ce

<a href="#"> 
    <span class="Yes yesno">Yes</span> 
</a> 

<a href="#"> 
    <span class="No yesno">No</span> 

pas le problème quand je fais plus d'un vote iam obtenir très gros problème

voir ce

<a href="#"> 
    <span class="Yes yesno">Yes</span> 
</a> 

<a href="#"> 
    <span class="No yesno">No</span> 
</a> 
<a href="#"> 
    <span class="Yes yesno">Yes</span> 
</a> 

<a href="#"> 
    <span class="No yesno">No</span> 
</a> 
</a> 

quand clic premier oui, il le rendre choisi et quand iam va à l'autre oui quand cliquez sur son parce selected mais le premier oui est devenu unselected

je veux faire un peu mince font que chaque oui et savoir est differant des autres

Answer 1

Changez votre html à ceci (Ajout divs autour des groupes de liens, pourrait être n'importe quel élément, ou vous pourriez le faire avec un attribut rel sur le href aussi).

<div class="linkgroup"> 
    <a href="#"> 
     <span class="Yes yesno">Yes</span> 
    </a> 

    <a href="#"> 
     <span class="No yesno">No</span> 
    </a> 
</div> 

<div class="linkgroup"> 
    <a href="#"> 
     <span class="Yes yesno">Yes</span> 
    </a> 

    <a href="#"> 
     <span class="No yesno">No</span> 
    </a> 
</div> 

Alors JS quelque chose comme:

$('.yesno').click(function(){ 
    $(this).parents('.linkgroup').find('.yesno').each(function(i, v){ 
     $(v).removeClass('selected'); 
    }); 
    $(this).addClass('selected'); 
    return false; 
}); 

(Il y a aussi un sélecteur de frères et soeurs pour jquery, ce qui peut rendre le code un peu plus propre, mais pas familier avec elle).

Answer 2

$('.yesno').click(function(){ 
    $(this).parents('.linkgroup').find('.yesno').each(function(i, v){ 
     $(v).toggleClass('selected'); 
    }); 
    $(this).toggleClass('selected'); 
    return false; 
});