如何一次添加一个类并删除以前添加的类？
Posted
技术标签:
【中文标题】如何一次添加一个类并删除以前添加的类？【英文标题】：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>
我想一次只添加一个类。
【问题讨论】：
您能详细解释一下您的海豚并展示示例吗？ Remove all classes except one的可能重复 【参考方案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);
);
【讨论】：
这是正确答案，见here。【参考方案6】：如果你想删除所有以前的类并添加一个新的，你可以使用 jQuery 的toggleClass 函数。
【讨论】：
以上是关于如何一次添加一个类并删除以前添加的类？的主要内容，如果未能解决你的问题，请参考以下文章
你可以扩展 SQLAlchemy 查询类并在同一个会话中使用不同的类吗？