jquery「this」分開懸停

我有一個自定義球員，我的客戶正在使用，他們給我的JavaScript是壞的......真的很糟糕。我真的不希望有從頭開始重做，所以我想我可以把他們的原始代碼jquery「this」分開懸停

var togglePlayer = function(){ 
     $('.jp-gui').slideUp(); 
     $('#jp_container, #jp_container2').hover(
      function() { 
       $('.jp-gui').slideDown(); 
      }, 
      function() { 
       $('.jp-gui').slideUp(); 
      } 
     ); 
    };

我試圖與該固定它：

var togglePlayer = function(){ 
     $('.jp-gui').slideUp(); 
     $('#jp_container, #jp_container2').hover(
      function() { 
       $(this + '.jp-gui').slideDown(); 
      }, 
      function() { 
       $(this + '.jp-gui').slideUp(); 
      } 
     ); 
    };

現在接縫只是不接受懸停。我用一個.toggleSlide完全重寫了它，它修復了懸停問題，但又增加了10個問題。

有誰知道一個簡單的修復方法，以便當我將鼠標懸停在#jp_container上時，它不會對＃jp_container2執行懸停動畫，反之亦然？

來源

2012-12-10 horribly_n00bie

回調函數中的'this'是一個DOM元素。用串連接它不會有任何好處。試試'$（'。jp-gui'，this）' –

BAMF！你贏了。你應該回答這個問題，以便我可以投票。 –

$('#jp_container, #jp_container2').hover(function() { 
    $(this).find('.jp-gui').stop(true, true).slideToggle(); 
});

來源

2012-12-10 22:41:13

 function() { 
      $(this + '.jp-gui').slideDown(); 
     },

this，在一個jQuery事件處理程序的情況下，是到該處理程序被附接（或委託，在事件代理的情況下）的DOM元素。將其轉換爲字符串將無濟於事。

嘗試：

 function() { 
      $('.jp-gui', this).slideDown(); 
     },

（然後第二個參數被稱爲上下文）或

 function() { 
      $(this).find('.jp-gui').slideDown(); 
     },

代替。兩者都將選擇事件目標中的所有.jp-gui元素（#jp_container或#jp_container2）。

如果你要作進一步修改，注意

#jp_container, #jp_container2有時可以[id^="jp_container"]（選擇其ID與指定字符串開頭的所有元素）取代。向兩個容器添加一個通用類會更好。

另外，正如@Michael所指出的那樣，一對slideUp/slideDown可以替換爲單個slideToggle。這可能並不總是最好的解決方案，但它確實縮短了代碼。

@邁克爾還建議以stop(true, true)停止以前的動畫。如果不停止動畫，則下一個動畫將在當前動畫（已排入隊列）後延遲，這可能會導致在多次懸停事件生成後元素上下滑動。如果容器更改其大小或其子容器轉義出來，而沒有stop，如果每個動畫都觸發額外的懸停事件，甚至可能會無限循環。

來源

2012-12-11 04:55:52

jquery「this」分開懸停

回答

相關問題