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

Je suis un réel débutant, alors, toutes mes excuses pour les déchets de codage!
J'ai écrit la suite de Jquery pour un projet de pratique, je me suis fixé:

Lorsque vous cliquez sur le div, il a la classe "in_answerbox1", a ajouté et un cloné div est créé dans le answerbox avec la classe "answerbox_letter1", a ajouté.

Finalement, il y aura beaucoup de divs dans une grille (ou de cellules dans un tableau) que lorsque vous cliquez sur un en particulier, il s'efface et semblent apparaître dans le answerbox. Ensuite, lorsque vous cliquez sur la chose dans le answerbox,la div dans la grille s'affiche à nouveau et le clone sera retiré de la answerbox.

Mais maintenant je veux la classe pour être ajouté que si la chose que je suis en cliquant sur n'est pas déjà dans la answerbox: c'est à dire si l'original ou le clone a une classe qui contient des "answerbox".

J'ai écrit la suite en sachant que ça ne marcherait pas, mais qu'il 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);

}


});

Des suggestions?

OriginalL'auteur Truvia | 2013-04-23

  1. 28

    Je pense que la question est dans la condition si :

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

    Essayez ceci :

    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 ce live violon exemple.

    Petite astuce : au lieu de n = (n + 1) vous pouvez faire n++ :).

    Modifier :

    Après avoir lu la question, j'ai fait un travail plein de script :

    En supposant que le 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 ce exemple ici.

    Vous devriez envisager d'utiliser attributs data-, ils vont être plus fiable, classes pour ce que vous essayez de faire.

    Notez que si vous voulez le sélecteur correspond seulement si l'attribut de classe commence par un mot, vous aurez envie [class^="word"]. * toutefois, les recherches à travers l'ensemble de l'attribut de classe.
    Attention tout de même, [class^="word"] ne correspondent pas <div class="test word"> voir ici.

    Ce sera d'essayer de trouver des éléments avec le sélecteur de donnée below l'élément en cours dans l'arborescence DOM, ne comprenant pas l'élément courant. Mais l'OP voulu vérifier l'élément en cours pour une classe donnée
    grâce corrigé, mal lu la question
    Merci pour l'astuce! Yep, je ne veux vérifier l'élément en cours pour une classe donnée.
    Rehaussé d'un exemple de travail après la lecture de votre question ;).
    mon mauvais! n'avais pas supprimé d'origine $('#case").cliquez sur(function(){ });

    OriginalL'auteur soyuka

  2. 4

    Utilisation .is() au lieu de .hasClass(). L'ancien peut être utilisé avec les sélecteurs CSS alors que celui-ci ne peut utiliser un nom de classe comme un "fixe" de la chaîne.

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

    REMARQUE: Cela ne fonctionne que de façon cohérente si l'élément a exactement une classe

    Qu'avez-vous meen par This will only work consistently if the element has exactly one class. J'ai fait un peu de test, mais ne peut pas comprendre.
    Si vous avez plus d'une classe, mentionné sélecteur pour .is() fonctionne si et seulement si le premier nom de la classe dans la liste commence avec answerbox. Si le nom de la classe que vous cherchez n'est pas le premier, le sélecteur ne fonctionnent pas comme prévu
    Ok maintenant je comprends, mais il semble fonctionner avec le *= sélecteur.
    Je pense que je vais avoir besoin de plusieurs classes, mais dans la théorie de ce travail si j'ai changé son idée avec au lieu de la classe?
    *^ a changé son id

    OriginalL'auteur devnull69

  3. 2

    Si vous besoin de quelque chose qui fonctionne pour plusieurs noms de classe, cochez cette

    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
}
    Merci pour cela, je vais jeter un oeil pour voir si je peux le faire fonctionner!

    OriginalL'auteur devnull69