Ajouter et supprimer plusieurs classes dans jQuery

Question

J'essaie d'ajouter et de supprimer plusieurs classes dans un champ de texte en cliquant sur différents boutons radio. Je ne parviens pas à supprimer les classes indésirables lorsque je passe d'un bouton radio à l'autre.

Mon code est le suivant :

// For 1st radio button
if (actionUrl == "search-client-by-id") {
    $("#req").removeClass("validate[required,custom[onlyLetterNumber],maxSize[20],custom[onlyLetterSp]]")
             .addClass("validate[required,custom[onlyNumberSp]]");
}
// For 2nd radio button
else if (actionUrl == "search-client-by-name") {    
    $("#req").removeClass("validate[required,custom[onlyNumberSp]]")
             .addClass("validate[required,custom[onlyLetterNumber],maxSize[20],custom[onlyLetterSp]]");
}

Answer 1

Vous pouvez séparer plusieurs classes dans l'espace :

$("p").addClass("myClass yourClass");

http://api.jquery.com/addClass/

Answer 2

Ajouter plusieurs classes :

$("p").addClass("class1 class2 class3");

ou en cascade :

$("p").addClass("class1").addClass("class2").addClass("class3");

Très similaire également pour supprimer plus de classes :

$("p").removeClass("class1 class2 class3");

ou en cascade :

$("p").removeClass("class1").removeClass("class2").removeClass("class3");

Answer 3

TL;DR

$("p").removeClass('one four').addClass("three one");

// FYI: Order of addClass & removeClass can be changed too & chaining is also possible, e.g
$("p").addClass("three one").removeClass('one four').addClass('class1 class2 class3');`

Plus d'exemples de travail et de détails.

// handle button click & add/remove classes
$("#myBtn").click(function() {

  $("#myPara").addClass("three four").removeClass('two three');

  // again show the classes applied after we addede/remove multiple classes
  $("#container").text($("#myPara").attr("class"));
});

.one {
  color: red;
}

.two {
  text-decoration: underline;
}

.three {
  font-style: bold;
}

.four {
  font-style: italic;
}

<p id="myPara" class="one two three">hello world</p>

<p> Classes applied: <b><span id='container'>one two three</span></b></p>

<button id="myBtn">Click Me</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 4

La façon la plus simple d'ajouter le nom d'une classe en utilisant le javascript. Cela peut être utile lorsque .siblings() se comportent mal.

document.getElementById('myId').className += ' active';

Answer 5

Utiliser ceci $("p").addClass("class1 class2 class3") ;