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 here。

希望有所帮助！欢呼声。

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。

这是一个不用担心的课程，而且元素永远不会意外同时拥有这两种状态。

Answer 3

我想我自己的代码（在问题中）虽然效率不高，但确实有效。问题是在悬停事件中鼠标离开功能结束时还有一个额外的逗号 -

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：！important; 实际上会做任何事情。实际上，使用上面的示例，您甚至不需要 sub-active 类，因为 sub-inactive 类被从元素中剥离，因此撤销了“显示：无;”言。

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

4 个答案: