Supprimer et ajouter des classes spécifiques - Jquery

Question

Je dois supprimer la classe existante d'un élément et ajouter une autre classe ... ou brièvement je veux remplacer une classe spécifique ayant les lettres 'border' comme sous-chaîne par une autre classe avec les lettres 'border' en tant que sous-chaîne. Je dois basculer entre 8 classes. J'ai essayé de sélectionner la classe précédente comme strClass = $ ("#" + styleTarget [class * = 'border']), mais cela a échoué. Will "bascule" m'aider dans cela. C'est très urgent. Merci

Answer 1

Vous pourriez faire quelque chose comme ceci:

var classes = ['border1', 'border2', 'border3', 'border4']; 
$("div[class*='border']").click(function() { 
    for(var i=0; i<classes.length; i++) { 
    if($(this).hasClass(classes[i])) { 
     $(this).removeClass(classes[i]).addClass(classes[(i+1)%classes.length]); 
     break; 
    } 
    } 
}); 

You can try it here, cela fonctionnera pour n'importe quel nombre de classes, il suffit d'ajouter autant que vous voulez passer à travers. Le concept est assez simple, lorsqu'un élément est cliqué sur le tableau, si on trouve une classe (via .hasClass()), on l'enlève (via .removeClass()) et on lui donne la classe suivante (via .addClass()).

Le module (i+1)%classes.length doit gérer le retour au début du tableau lorsqu'il contient actuellement la dernière classe.

Answer 2

Vous pourriez trouver la classe avec le sélecteur, puis utiliser .html pour réécrire le nom de la classe

Answer 3

Je ne ai jamais essayé d'utiliser bascule avec des classes, ce qui a toujours travaillé pour moi:

$("#element").addClass("some_class");
$("#element").removeClass("some_class");

Answer 4

Nous pourrions fournir une meilleure réponse si vous partagiez votre code, mais la fonction .toggleClass() va supprimer une classe si elle est actuellement utilisée sur l'élément sélectionné ou l'ajouter si elle n'existe pas. Et vous pouvez spécifier plusieurs classes à supprimer ou à ajouter, comme suit:

// removes or adds classes depending on existence 
$('#element_id').toggleClass('one two three four');