web-dev-qa-db-fra.com

Jquery Si l'élément a une classe qui commence par x, ne pas addClass

Je suis un débutant, alors excuses pour le codage des ordures! J'ai écrit le JQuery suivant pour un projet de pratique que je me suis fixé:

Lorsque vous cliquez sur le div, la classe "in_answerbox1" est ajoutée et un div cloné est créé dans la boîte de réponse avec la classe "answerbox_letter1" ajoutée. 

Finalement, il y aura beaucoup de divs dans une grille (ou des cellules dans un tableau) qui, lorsque vous cliquez sur un nom particulier, disparaîtront et sembleront apparaître dans la zone de réponse. Ensuite, lorsque vous cliquez sur l'élément dans la zone de réponse, la division correspondante de la grille réapparaîtra et le clone sera supprimé de la boîte de réponse.

Cependant, je veux maintenant que la classe soit ajoutée UNIQUEMENT si la chose sur laquelle je clique n’est pas déjà dans la boîte à réponses: c’est-à-dire si l’original ou le clone a une classe qui contient la "boîte à réponses". 

J'ai écrit ce qui suit en sachant que cela ne fonctionnerait pas, mais que cela pourrait expliquer ce que je veux mieux.

var n = 0;

$('#box').click(function(){

    if(!$(this).hasClass('*[class^="answerbox"]')) {

    $(this).addClass('in_answerbox' + (n+ 1) );

    $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + (n + 1));
    n = (n + 1);

}


});

Aucune suggestion?

jqueryaddclass
15
Truvia

Je pense que la question est dans la condition si:

if(!$(this).hasClass('[class^="answerbox"]')) {

Essaye ça :

if(!$(this).is('[class*="answerbox"]')) {
    //Finds element with no answerbox class
} else {
    //The element has already an answerbox class
}

Vous devriez jeter un oeil à toggleClass et est jquery docs.

Voir ceci exemple de violon vivant .

Petit conseil: au lieu de n = (n + 1) vous pouvez faire n++ :).

Modifier :

Après avoir relu la question, j’ai fait unSCRIPT COMPLET:

En supposant que Html est:

<div id="box">
    <p>Answer1</p>
    <p>Answer2</p>
    <p>Answer3</p>
</div>

<div id="answerbox">

</div>

jQuery :

var n = 0;

$('#box p').on('click',function(e) {
    e.preventDefault();
    if(!$(this).is('[class*="answerbox"]')) {
        n++;
        $(this).addClass('in_answerbox' + n );
        $(this).clone().appendTo('#answerbox').addClass('answerbox_letter' + n); 
    }
});

Voir ceci exemple ici .

Vous devriez envisager d'utiliser attributs de données , ils seront plus fiables que classes pour ce que vous essayez de faire.

Notez que si vous souhaitez que le sélecteur ne corresponde que si l'attribut de classe commence par un mot, vous aurez besoin de [class^="Word"]. * recherche cependant dans l'attribut de classe entière. Attention, [class^="Word"] ne correspondra pas à <div class="test Word">voir ici . 

28
soyuka

Utilisez .is() au lieu de .hasClass(). Le premier peut être utilisé avec les sélecteurs CSS, tandis que le second ne peut utiliser que le nom de la classe en tant que chaîne "fixe".

if(!$(this).is('[class^="answerbox"]'))

Remarque: cela ne fonctionnera de manière cohérente que si l'élément a exactement une classe

4
devnull69

Cochez cette case si vous avez besoin de quelque chose qui fonctionne pour plusieurs noms de classe.

var theClasses = $(this).attr('class').split(" ");
var i=0;
var found = false;
while(i<theClasses.length && !found) {
   if(theClasses[i].indexOf('answerbox') == 0) {   // starts with answerbox
      found = true;
   }
   i++;
}
if(!found) {
   // the current element does not have a class starting with answerbox
}
2
devnull69

Les autres réponses ne fonctionnent pas si votre élément a plusieurs classes sur le même élément. Vous devez le sélectionner comme tel:

if ( $(this).is('[class^="bleh_"], [class*=" bleh_"]') ) {

    // Return true if element has class that starts with "bleh_"

    // Note: The second argument has a space before 'bleh_'

}
0
Jack Nicholson