2010-06-09 63 views
3

我爲頁面上的某些選項卡創建了一個簡單的背景效果,但如果該選項卡具有「當前」類,則不希望觸發該效果。jQuery .hasClass方法省略效果

我相信是有辦法做到這一點使用.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'}) 
}); 
+0

「current」類是動態添加的,還是在頁面加載時出現? – 2010-06-09 16:55:08

+0

它被動態添加,是的 – 2010-06-09 17:38:11

回答

2
.mouseover(function(e) { 

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

如果該元素具有一類的lol殺函數立即返回。

+0

雖然我同意這個答案,我不認爲你已經提供了足夠的解釋。 – 2010-06-09 16:54:00

0

使用:not()選擇:

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

現在,如果類current是動態增加或刪除(感謝Matt!)到<a>標籤,這將產生混亂的結果,當鼠標懸停事件綁定該元素列表是靜態的。如果您還對飛應用類current,然後用live()來綁定事件,這樣你永遠只能得到錨,在那一刻,應用了current類:

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

你也可以把它放在選擇器:

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

你的答案更快...並且比我的更正確! +1 – Agos 2010-06-09 16:55:57

+0

如果'current'類被動態地添加到元素,我不確定這會起作用。如果事件處理程序是使用'.live()'分配的,那麼它確實有效。但是使用'.bind()'即使選擇器被改變,處理程序也會與元素保持一致。 – user113716 2010-06-09 16:56:09

+0

@patrick - 這可能是靜態頁面加載的一個很好的解決方案,但你是正確的。如果這樣做的目的是動態應用當前狀態,那麼沒有實時查詢就無法工作。另外我還沒有意識到活着已經被添加到核心,這是完全甜蜜的。我需要趕上這裏。 – 2010-06-09 17:03:12