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

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

       .sub-inactive{display:none;} .sub-active{display:!important;}   $(document).ready(function(){ $('.sub').parent().hover( function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); }, function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }, ); });    
 
 
link1
 
link2
 
link3 
 
link 3a
 
link 3a
 
link 3a
 
link 3a
 
 
 
link4
 
link5
 
 
   

基本上，有一个元素附加到一个元素（在这种情况下，子活动，亚非活动）。 并且基于页面中发生的某些事件，我想动态地改变元素的类状态。 即，例如，如果对于一个元素，现在出现的类是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

一个简单的改变

 $(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 2

使用toggleClass()添加一个类（如果尚未存在），或者删除它（如果存在）。 因为逻辑是相同的，你可以只传递一个函数来hover 。

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

这里的文档。

希望有所帮助！ 干杯。

Answer 3

我想我自己的代码（在问题中），虽然效率不高，但确实有效。 问题是在hover事件中mouseleave函数结束时有一个额外的逗号 –

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

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

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

Answer 4

我认为基本上你正在寻找的是这样的……

此外，您可能想要检查您的CSS。 我不认为设置显示：！important; 实际上会做任何事情。 实际上，使用上面的示例，您甚至不需要子活动类，因为从该元素中剥离了子非活动类，因此撤消了“display：none;” 声明。