jQuery - 在添加和/或刪除類名時運行函數

Question

我正在開發一個條件語句的函數，該語句（現在）必須在從div層刪除類名時運行警報。下面的代碼：

<div class="ui-tabs-panel ui-tabs-hide">panel</div> 
<div><a href="#" class="control">control</a></div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=3.0"></script> 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
    $('.control').hover(
     function() { 
      $('.ui-tabs-panel').removeClass('ui-tabs-hide'); 
     }, 
     function() { 
      $('.ui-tabs-panel').addClass('ui-tabs-hide'); 
     } 
    ); 
    if ($('.ui-tabs-panel:not(.ui-tabs-hide)')) { 
     alert('hello'); 
    } 
}); 
//--> 
</script> 

整個「控制」鏈接，連接到它的功能，只是有觸發添加和移除類名。

現在，當頁面加載時會出現警報，它不應該，所以我認爲我必須在那裏得到錯誤的語法。使用「control」鏈接從div中刪除ui-tabs-hide類不會觸發警報，它應該。我猜想我需要合併某種事件綁定，但我不太瞭解事件綁定。

有誰能幫我解決這個問題嗎？

Answer 1

我不知道你是否可以檢測到一個「事件」，比如元素上的類名操作。

您在頁面加載中看到提醒的原因在於它位於包含在jQuery的$(document).ready函數中的if塊中，該函數在頁面加載時觸發一次。實質上，您沒有將此附加到除DOM準備事件以外的任何事件。因此，當頁面加載並準備好DOM時觸發，並且if語句的計算結果爲true。

您還需要使用.length財產在你的表達：

if ($('.ui-tabs-panel:not(.ui-tabs-hide)').length) { 
    alert('hello'); 
} 

// Or... 
if ($('.ui-tabs-panel').not('.ui-tabs-hide').length) { 
    alert('hello'); 
} 

注意

我只是想在這裏警告說，上面的代碼將取決於你試圖什麼如果你的班級變化檢測活動 - .length會給你匹配元素的總數，所以如果你有多個.ui-tabs-panel's，這可能會給你一個誤報。如果您想在結果或某種其他事情上做某些事情（如果有多個結果的話），您需要考慮類似於調用jQuery結果的.each()。

的一種方式可能是運行超時，並試圖檢查ui-tabs-panel類元素也有ui-tabs-hide類：

http://jsfiddle.net/userdude/4cF5v/

$(document).ready(function(){ 
    $('.control').hover(
     function() { 
      $('.ui-tabs-panel').removeClass('ui-tabs-hide'); 
     }, 
     function() { 
      $('.ui-tabs-panel').addClass('ui-tabs-hide'); 
     } 
    ); 
    runCheck(); 
}); 

function runCheck(){ 
    if ($('.ui-tabs-panel').hasClass('ui-tabs-hide')) { 
     alert('hello'); 
    } 
    setTimeout(function(){runCheck()},5000); 
} 

我創建了一個runCheck()功能，放在.hasClass()通話它，然後創建一個超時，這將再次運行runCheck()，再次設置超時，並繼續。

我將超時設置爲5000，以便您的瀏覽器不會進入無限循環（每隔5秒檢查一次）。在實踐中，它可能應該調整到50到500之間; 1000等於1000毫秒或1秒。

這是一個50毫秒超時，並不會鎖定您的計算機到一個alert()循環的另一種方法：

http://jsfiddle.net/userdude/k44qR/

鼠標懸停控制環節，鼠標移開，然後再次將鼠標放置，和你」會看到它開始，停止，然後再次開始。

Answer 2

您可以創建自定義事件

演示 http://jsfiddle.net/k44qR/2/

$(document).ready(function(){ 
    $('.control').hover(
     function() { 
      $('.ui-tabs-panel').removeClass('ui-tabs-hide').trigger("displayPanel"); 
     }, 
     function() { 
      $('.ui-tabs-panel').addClass('ui-tabs-hide'); 
     } 
    ); 

    $('.ui-tabs-panel').bind("displayPanel",function(){alert("hello")}); 

});