【问题标题】：How to add one class at a time and remove previously added classes?如何一次添加一个类并删除以前添加的类？
【发布时间】：2017-01-23 04:56:04
【问题描述】：
如何只添加选中的类和移除之前选中的其他类？
<html>
<select name="Button-Style" id="Button-Style" style="width:100%;">
<option value="Sun-Flower">Sun Flower</option>
<option value="orange-flat">orange-flat</option>
</select>
<script>
$(document).ready(function(){
$('#Button-Style').change(function(){
if($(this).val() == 'sun-flower'){
$("#$id>input").addClass('sun-flower-button');
}
else if($(this).val() == 'orange-flat'){
$("#" + id).addClass('orange-flat-button');
}
else{
}
});
});
</script>
</html>
我想一次只添加一个类。
【问题讨论】：
标签：
javascript
jquery
html
css
【解决方案1】：
你可以用 jquery 来做这个。
$('.selected_check').change(function () {
if ($(this).is(":checked")) {
var x = $(this).closest('tr').prop('id');
var id = "#" + x;
$(id).removeClass('td_bgcolor');
$(id).addClass('highlight_row');
} else {
var y = $(this).closest('tr').prop('id');
var id = "#" + y;
$(id).removeClass('highlight_row');
$(id).addClass('td_bgcolor');
}
});
只需使用 removeClass 和 addClass 干杯！！
【解决方案2】：
在 jQuery 中使用 removeClass() 函数。
例如;
HTML：
<div id="adiv" class="1st-class"></div>
现在是 jQuery；
$("#adiv").addClass("2nd-div"); // This 'll add 2nd-class with the div
$("#adiv").removeClass("1st-div"); //This 'll remove the 1st-class from the div.
现在，如果您想删除所有以前添加的类，只需这样做；
$("#adiv").removeClass(); //removeClass without any argument removes all class
【解决方案3】：
我在理解你的问题时遇到了一些困难，但我想我明白了它的要点。
假设您有以下 HTML：
<div class="menu">
<div class="menu--option">Option 1</div>
<div class="menu--option">Option 2</div>
<div class="menu--option">Option 3</div>
</div>
每当有人单击某个选项时，我们都希望将 s-active 类添加到其中，同时确保它是唯一具有该类的类。你会想做这样的事情：
// First, we listen to the click event.
$("menu--option").click(function () {
// When it fires, we select all of the menu options,
// and iterate over them, removing '.s-active' from it
// if the element has the class.
$("menu--option").each(function () {
$(this).removeClass("s-active");
});
// Finally, we add '.s-active' to the element that was clicked.
$(this).addClass("s-active");
}
希望这对您有所帮助！
【解决方案4】：
你可以这样编码！
$('#Button-Style').change(function(){
$(this).removeClass();
if($(this).val()=="your_option_value"){
$(this).addClass("new_class");}
}
【解决方案5】：
我不确定选择要添加类的元素，但您可以使用 removeClass() 而不向函数提供参数以删除所有以前应用的类到项目，然后像使用 addClass() 一样添加您的类
if($(this).val() == 'sun-flower'){
$("#$id>input").removeClass(); // Remove all classes .. although please check selector
$("#$id>input").addClass('sun-flower-button');
}
else if($(this).val() == 'orange-flat'){
$("#" + id).removeClass();
$("#" + id).addClass('orange-flat-button');
}
我还可以建议直接从选择项中的选项值传递类名。那么就不需要额外的 if 条件了。
<select name="Button-Style" id="Button-Style" style="width:100%;">
<option value="Sun-Flower-button">Sun Flower</option>
<option value="orange-flat-button">orange-flat</option>
</select>
在 jquery 中
$('#Button-Style').change(function(){
var className = $(this).val();
$('#inputElement').removeClass();
$('#inputElement').addClass(className);
});