jQuery에서 여러 클래스 추가 및 제거

jQuery에서 여러 클래스 추가 및 제거

다른 라디오 단추를 눌러 텍스트 필드에 여러 클래스를 추가하거나 제거하려고 합니다.다른 라디오 단추를 전환하는 동안 원하지 않는 클래스를 제거할 수 없습니다.

내 코드는 다음과 같습니다.

// 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]]");
}

공백을 사용하여 여러 클래스를 구분할 수 있습니다.

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

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

여러 클래스 추가:

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

또는 계단식으로:

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

더 많은 클래스를 제거하는 것도 매우 유사합니다.

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

또는 계단식으로:

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

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');`

추가 작업 예제 및 세부 정보.

// 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>

Javascript를 사용하여 클래스 이름을 추가하는 가장 쉬운 방법.다음과 같은 경우에 유용할 수 있습니다..siblings()잘못된 행동을 하고 있습니다.

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

이 $("p")를 사용합니다. addClass("class1 class2 class3");

언급URL : https://stackoverflow.com/questions/7185709/add-and-remove-multiple-classes-in-jquery