jQuery事件邏輯/操作順序

Question

我錯過了正在處理的頁腳元素的最後1％。

我想要做的邏輯應該是顯而易見的：我想讓EXPAND這個詞顯示，當我將鼠標懸停在頁腳上時，我希望顯示頁腳展開時單詞HIDE。

當頁腳展開時，除了HIDE部分之外，我已經可以工作了 - 當我將鼠標懸停在頁腳塊上時，它會再次顯示EXPAND字樣。我想停止發生懸停事件。或者至少我認爲這就是我想要做的。

=>JSFiddle會告訴你我在說什麼。

感謝幫助，

特里

$(document).ready(function() { 
    $("#shows").click(function() { 
     $('footer').toggleClass("highlight"); 
     $('#shows').text('Hide'); 
    }); 
    $("footer").hover(
     function() { 
     $('#shows').text('+Expand'); 
     }, 
     function() { 
     $('#shows').text('Shows'); 
     } 
    );  
}); 

Answer 1

我想你想要做的是改變基於頁腳是否有類「亮點」 #shows的懸停文本。我改變了你的懸停處理程序：

$("footer").hover(
    function() { 
     $('#shows').text($('footer').hasClass("highlight") ? "Hide" : "+Expand"); 
    }, 
    function() { 
     $('#shows').text('Shows'); 
    } 
); 

Modified Fiddle

Answer 2

你在找什麼是戰略打電話unbind。這工作在你的小提琴：

function setNotExpanded(elem) { 
    $(elem).unbind('mouseenter mouseleave').hover(
     function() { 
     $('#shows').text('+Expand'); 
     }, 
     function() { 
     $('#shows').text('Shows'); 
     } 
    ); 
} 

function setExpanded(elem) { 
    $(elem).unbind('mouseenter mouseleave'); 
} 

$(document).ready(function() { 

    $("#shows").click(function() { 
     if ($('footer').hasClass('highlight')) { 
     $('#shows').text('Shows'); 
     setNotExpanded('footer'); 
     } else {     
      $('#shows').text('Hide'); 
      setExpanded('footer'); 
     } 
     $('footer').toggleClass("highlight"); 
    });    

    setNotExpanded('footer'); 

});