如何使用 jquery 动态添加或删除附加到元素的类？答案

【问题标题】：how do i dynamically add or remove classes attached to an element using jquery?如何使用 jquery 动态添加或删除附加到元素的类？
【发布时间】：2011-10-19 18:09:04
【问题描述】：

我正在尝试在我的网页中使用 jQuery 动态添加和删除类。这是代码-

<!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>

基本上，有多个类附加到一个元素（在这种情况下，子活动，子非活动）。并且基于页面中发生的一些事件，我想动态地改变元素的类状态。即，例如，如果对于一个元素，现在存在的类是 class= "sub sub-active"，我想使用 jquery 将其更改为 class= "sub sub-INACTIVE" ....

请告诉我如何从元素中添加/删除特定类。下面给出的两行代码（来自上面的示例）似乎不起作用 -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
        function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }

谢谢！

【问题讨论】：

标签： javascript jquery css dynamic addclass

【解决方案1】：

一个简单的改变

$(document).ready(function(){
  $('.sub').parent().hover(
    function(){ $('.sub', this).removeClass('sub-inactive').addClass('sub-active'); },
    function(){ $('.sub', this).removeClass('sub-active').addClass('sub-inactive'); },
    );
});

当您使用toggleClass() 时，事情变得更加简单：

$(document).ready(function(){
  $('.sub').parent().hover(function() {
    $('.sub', this).toggleClass('sub-inactive sub-active');
  });
});

无论如何，为非活动状态设置一个额外的类并没有太大意义。只需使用非活动（默认）外观设置.sub 的样式，并为活动外观切换.sub-active。

这是一个少担心的类，元素永远不会意外地同时具有两种状态。

【讨论】：

“this”实际上是指父元素（在本例中是 li link3），还是指给定“sub”类的 ul？我试过你的代码，它隐藏了主菜单 li (link3) 在悬停时显示...
@arun：它总是指您附加了事件处理程序的元素。在您的情况下，.sub 的父母。这就是为什么我在事件处理程序中使用this 作为 jQuery 操作的上下文。（再试试我的代码，也许你已经尝试过第一个版本）

【解决方案2】：

使用toggleClass() 来添加一个尚未存在的类，如果存在则将其删除。因为逻辑是一样的，你可以只传递一个函数给hover。

$(document).ready(function(){
    var sub = $('.sub');
    sub.parent().hover(function(){ 
        sub.toggleClass('sub-inactive sub-active'); 
    });
 });

文档here.

希望有帮助！干杯。

【讨论】：

【解决方案3】：

我猜我自己的代码（在问题中）虽然效率不高，但实际上可以工作。问题在于悬停事件中 mouseleave 函数末尾有一个额外的逗号 -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },

上面第二行代码末尾的逗号导致了 JS 中的错误，而我一直认为问题出在我使用 removeClass 和 addClass 的方式上。

感谢大家的帮助，我从以上两个回复中学到了一点。

【讨论】：

但是$('.sub') 会在整个页面上选择所有个这样的元素——我怀疑你真的想要那个。

【解决方案4】：

我认为基本上你正在寻找的东西是这样的......

<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');
    });
});

另外，您可能需要检查您的 CSS。我不认为设置 display:!important; 实际上会做任何事情。实际上，使用上面的示例，您甚至不需要 sub-active 类，因为 sub-inactive 类已从元素中剥离，因此撤销了 "显示：无；”声明。

【讨论】：

$('.sub') 选择器可以重复使用，parent() 的结果也可以重复使用，hover() 和 .mouseout() 的每次调用的处理程序也可以重复使用。