在 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]]");
}
190827 次浏览

您可以使用空格分隔多个类:

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

Http://api.jquery.com/addclass/

使用 javascript 附加类名的最简单方法。 当 .siblings()表现不佳时,它可能是有用的。

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

添加多个类:

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

或者像瀑布一样:

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

也非常类似于删除更多的类:

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

或者像瀑布一样:

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

用这个 $(“ p”) . addClass (“ class1 class2 class3”) ;

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>