如何使用jquery动态添加或删除附加到元素的类？
[英]how do i dynamically add or remove classes attached to an element using jquery?
问题描述
I'm trying to add and remove classes dynamically using jQuery in my webpage. 
我正在尝试使用jQuery在我的网页中动态添加和删除类。 Here;s the code - 这是代码-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.sub-inactive{display:none;}
.sub-active{display:!important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.sub').parent().hover(
function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },
);
});
</script>
</head>
<body>
<div id="container">
<ul class="main">
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub sub-inactive">
<li>link 3a</li>
<li>link 3a</li>
<li>link 3a</li>
<li>link 3a</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</body>
</html>
Basically, there are multiple classes attached to an element (sub-active, sub-inactive in this case). 基本上，有多个类附加到一个元素（在这种情况下，是子活动的，子活动的）。 And based on some event that happens in the page, i want to dynamically alter the class state of the element. 并且基于页面中发生的某些事件，我想动态更改元素的类状态。 ie, for example if for an element, the class that is present right now is class = "sub sub-active", i want to change using jquery to class = "sub sub-INACTIVE".... 即，例如，如果对于某个元素，当前存在的类是class =“ sub sub-active”，我想使用jquery更改为class =“ sub sub-INACTIVE” ....
Please let me know how to add/remove specific classes from an element. 请让我知道如何从元素添加/删除特定的类。 The two lines of code given below (from the above example) does not seem to work - 下面给出的两行代码（来自上面的示例）似乎不起作用-
function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }
Thanks! 谢谢！
4 个解决方案
解决方案1
3 2011-10-19 18:12:03
use toggleClass() to add a class if not already present, or remove it if it is present. 使用toggleClass()添加一个类（如果尚不存在），或将其删除（如果存在）。 because the logic is the same, you can just pass a single function to hover . 因为逻辑是相同的，所以您只需将一个函数传递给hover 。
$(document).ready(function(){
var sub = $('.sub');
sub.parent().hover(function(){
sub.toggleClass('sub-inactive sub-active');
});
});
hope that helps! 希望有帮助！ cheers. 干杯。
解决方案2
3 已采纳 2011-10-19 18:12:07
One simple change 一个简单的变化
$(document).ready(function(){
$('.sub').parent().hover(
function(){ $('.sub', this).removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub', this).removeClass('sub-active').addClass('sub-inactive'); },
);
});
When you use toggleClass() , things become even easier: 当您使用toggleClass() ，事情变得更加简单：
$(document).ready(function(){
$('.sub').parent().hover(function() {
$('.sub', this).toggleClass('sub-inactive sub-active');
});
});
Anyway it doesn't make too much sense to have an extra class for the inactive state. 无论如何，为非活动状态添加额外的类没有太大意义。 Just style .sub with the inactive (default) look and toggle a .sub-active for the active ones. 只需将.sub设置为非活动（默认）外观样式，然后将.sub-active切换为.sub-active外观即可。
That's one less class to worry about and elements can never accidentally have both states at the same time. 那是少一类的人，元素永远不能意外地同时具有两个状态。
解决方案3
1 2011-10-19 18:31:23
I guess my own code (in the question), though not efficient, actually works. 我想我自己的代码（在问题中）虽然效率不高，但实际上有效。 The issue was with one extra comma at the end of mouseleave function within the hover event - 问题是悬停事件中mouseleave函数的末尾有一个逗号-
function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },
the comma at the end of second line of code above caused the error in JS, and all the while i thought the issue was with the way i used removeClass and addClass. 上面第二行代码结尾的逗号引起了JS错误，而我一直以为问题出在我使用removeClass和addClass的方式上。
thanks for helping everyone, i learned a bit from the above two responses. 感谢您对大家的帮助，我从以上两个回答中学到了一些。
解决方案4
1 2011-10-19 18:33:24
I think basically what you're looking for is something like this... 我认为基本上您正在寻找的是这样的东西...
<script type="text/javascript">
$(document).ready(function(){
$('.sub').parent().hover(function(){
$(this).find('ul.sub').removeClass('sub-inactive').addClass('sub-active');
});
$('.sub').parent().mouseout(function(){
$(this).find('ul.sub').removeClass('sub-active').addClass('sub-inactive');
});
});
Also, you might want to check your CSS. 另外，您可能要检查CSS。 I don't think that setting display:!important; 我认为设置显示不重要！ will actually do anything. 实际上会做任何事情。 In fact, using the above example, you shouldn't even need the sub-active class, because the sub-inactive class is stripped from the element, therefore revoking the "display:none;" 实际上，使用上面的示例，您甚至不需要子活动类，因为该子非活动类已从元素中剥离，因此撤销了“ display：none;”。 statement. 声明。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.