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

Question

我正在尝试使用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'); }

谢谢！

Answer 1

使用toggleClass()添加一个类（如果尚不存在），或将其删除（如果存在）。 因为逻辑是相同的，所以您只需将一个函数传递给hover 。

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

docs 在这里。

希望有帮助！ 干杯。

Answer 2

一个简单的变化

$(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切换为.sub-active外观即可。

那是少一类的人，元素永远不能意外地同时具有两个状态。

Answer 3

我想我自己的代码（在问题中）虽然效率不高，但实际上有效。 问题是悬停事件中mouseleave函数的末尾有一个逗号-

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

上面第二行代码结尾的逗号引起了JS错误，而我一直以为问题出在我使用removeClass和addClass的方式上。

感谢您对大家的帮助，我从以上两个回答中学到了一些。

Answer 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：none;”。 声明。

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

问题描述

4 个解决方案

解决方案1
3 2011-10-19 18:12:03

解决方案2
3 已采纳 2011-10-19 18:12:07

解决方案3
1 2011-10-19 18:31:23

解决方案4
1 2011-10-19 18:33:24

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

问题描述

4 个解决方案

解决方案1 3 2011-10-19 18:12:03

解决方案2 3 已采纳 2011-10-19 18:12:07

解决方案3 1 2011-10-19 18:31:23

解决方案4 1 2011-10-19 18:33:24

解决方案1
3 2011-10-19 18:12:03

解决方案2
3 已采纳 2011-10-19 18:12:07

解决方案3
1 2011-10-19 18:31:23

解决方案4
1 2011-10-19 18:33:24