Restreindre le nombre de sélections et insérer les données sélectionnées dans un tableau

Question

J'ai 15 éléments de liste. J'autorise l'utilisateur à choisir seulement 5 d'entre eux. Ensuite, je mets cette information dans le tableau et soumettre au serveur.

<li><a href="#" id="item1" class="select">Item One</a></li> ... etc. 

Puis-je utiliser ce code pour activer la classe des éléments sélectionnés

function SelectPrizes(){ 
$('a.select').click(function() { 
    $(this).toggleClass("selected"); 
    $(this).text($(this).text() == 'Choose prize' ? 'Selected' : 'Choose prize'); 
    return false; 
}); 
} 

Ma question est, comment autoriser uniquement les 5 sélections et ajouter uniquement les éléments sélectionnés à un tableau par ID. Je comprends que je peux filtrer par hasClass ('sélectionné'), mais je ne peux pas trouver la bonne syntaxe pour cela.

Answer 1

Pour répondre à vos trois questions:

Permettre 5 sélections: Assurez-vous la longueur de $('a.select.selected') ne dépasse pas votre limite de 5:

if ($('a.select.selected').length < 5) { 
    // Does not exceed, so we can add... 
} 

Ajouter uniquement les éléments sélectionnés tableau: il suffit d'ajouter que les éléments avec la classe « sélectionné »:

$('a.select.selected').each(function(){ 
    // Add to array 
}); 

La syntaxe de hasClass (« sélectionné ») comme M. Déception suggéré:

if ($(this).hasClass('selected')) { 

} 

la solution de M. Déception ne fonctionnera que si vous permettez à l'utilisateur de sélectionner plus de 5 éléments, puis il suffit de sélectionner une 5 d'eux.

Aussi, une suggestion pour améliorer votre code HTML. Je suppose que les éléments li ont un parent ul. Définissez la classe 'select' sur ce parent ul et utilisez le sélecteur: $ ('ul.select li a'). Click().

J'ai mis tout cela ensemble dans un jsFiddle pour vous: http://jsfiddle.net/5b8aj/6/

Answer 2

Vous pouvez utiliser slice(start, end) pour obtenir un nombre spécifique de résultats de la sélection, en commençant par l'index spécifié.

var results = $("a.select").slice(0, 5); 

La deuxième partie de votre question peut être répondue avec un chèque conditionnel:

if ($(this).hasClass("selected")) { 

} 

Answer 3

Vérifiez la valeur suivante pour la décision de soumission de savoir si 5 éléments sont sélectionnés ne sont pas -

$('a.select[class*="selected"]').length==5