jQuery的.hasClass方法用于忽略效果

Question

我为页面上的一些选项卡创建了一个简单的背景效果，但如果选项卡具有“current”类，则不希望触发该效果。

我认为可以使用.hasClass来实现这一点。

以下是我用于该效果的代码：

$('ul.htabs a').mouseover(function(){

 $(this).stop().animate(
  {backgroundPosition:"(0 -810px)"}, 
  {duration:150},
  {easing: 'easeOutCubic'})
 }).mouseout(function(){
 $(this).stop().animate(
  {backgroundPosition:"(0 -806px)"}, 
  {duration:150},
  {easing: 'easeInCubic'})
 });

- Mr Jonny Wood

---

current类是动态添加的，还是在页面加载时就存在？ - Nick Craver

它是动态添加的，是的。 - Mr Jonny Wood

Answer 1

您也可以将其放入选择器中：

$('ul.htabs:not(.current) a').mouseover(function(){ ... });

- garann

---

如果current类是动态添加到元素中的，我不确定这是否有效。如果使用.live()分配事件处理程序，则可以正常工作。但是，即使选择器更改，使用.bind()绑定的处理程序仍将保留在元素中。 - user113716

@patrick - 这可能是静态页面加载的好解决方案，但你是正确的。如果这是为了实现动态应用 current ，则没有活动查询将无法正常工作。另外，我没有意识到 live 已经添加到核心中，那太棒了。我需要在这里赶上。 - Jonathan Park

我应该指出，这是一个很好的解决方案，前提是OP不希望处理程序跟随添加/删除"current"类。也许我做了太多的假设。 - user113716

@Jonathan - 是的，我可能犯了一个经典错误，就是假设。（如果你知道我的意思的话。） - user113716

Answer 2

.mouseover(function(e) {

if ( $(this).hasClass('lol') ) {
  return;
}

如果元素的类名为lol，则立即返回并停止该函数。

- meder omuraliev

---

虽然我认同这个答案，但我认为你没有提供足够的解释。 - Jonathan Park

Answer 3

使用:not()选择器：

$('ul.htabs:not(.current) a').mouseover(function(){
    // ... your code here
});

现在，如果类current动态添加或删除（感谢Matt！）到<a>标签中，这将产生混乱的结果，因为当mouseover事件绑定时，元素列表是静态的。如果您也正在动态应用类current，那么请使用live()来绑定事件，这样您只会得到此刻已应用current类的锚点：

$('ul.htabs:not(.current) a').live('mouseover', function(){
    // ... your code here
});

- artlung