如何使用 jQuery 添加类？
Posted
技术标签:
【中文标题】如何使用 jQuery 添加类？【英文标题】：How to add class using jQuery? 【发布时间】：2012-05-28 23:01:32 【问题描述】：我创建了一个小函数，当我们点击 li> 时，它的工作是在 <li> 中添加类，但如果 <li> 已经有它，我想删除它。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Tue, 22 May 2012 12:39:23 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body
color:#000000;
background-color:#FFFFFF;
a color:#0000FF;
a:visited color:#800080;
a:hover color:#008000;
a:active color:#FF0000;
-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function()
$('.main').find('li').each(function()
$(this).live('click', function ()
$(this).addClass('active')
)
)
)
</script>
</head>
<body>
<ul class="main">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
</body>
</html>
【问题讨论】：
【参考方案1】：您可以只使用toggleClass 这将根据需要添加或删除它
$('.main li').live('click',function()
$(this).toggleClass('active');
);
如果你想从其他地方移除这个类，你可以多加一行：
$('.main li').live('click',function()
$('.main li.active').removeClass('active')
$(this).addClass('active');
);
【讨论】：
【参考方案2】：使用jquery函数.toggleClass。
$('.main li').click( function()
$(this).toggleClass('active');
);
这应该可以解决问题；） http://api.jquery.com/toggleClass/
【讨论】：
当我们单击第一个 li 时，它正在添加活动的类现在我想要如果我们单击第二个 li 那么应该删除第一个 li 类 按照 Jamiec 的建议，您可以添加$('.main li.active').removeClass('active')【参考方案3】：
我们可以更好地使用 .on() 或 .delgate() 方法：
不再推荐使用 .live() 方法，因为后来的jQuery 版本提供了没有缺点的更好的方法。特别是，使用 .live()会出现以下问题：
https://api.jquery.com/live/
$('#showDiv').on('click',function()
$(this).toggleClass('active');
);
【讨论】：
【参考方案4】：这将工作尝试...
$("#button").click(function()
$(".addclass").addClass("add");
)
$("#button2").click(function()
$(".addclass").removeClass("add");
).add
color:red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="addclass">Sample text to add class on it</p>
<button id="button">Add Class</button>
<button id="button2">Remove Class</button>【讨论】：
以上是关于如何使用 jQuery 添加类？的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有循环或jquery的mvc中使用模型类添加动态控件
如何根据值将 css 类添加到选择列表选项中 - 使用 jQuery