如何在“ on mouseenter”和“ on mouseleave”上僅使用一次變量？

Question

我有多個不同大小的對象，我希望每個對象on mouseleave on mouseenter顯示其他框on mouseenter並on mouseleave on mouseenter隱藏。 我有一個完美做到這一點的jquery腳本，我唯一關心的是我重復了兩次變量，並且有些事情告訴我，無需重復自己就可以做到這一點。

問題在於它們都強烈地基於$(this)核心元素，因此我不能將變量設為全局。 我的猜測是，我應該在調用on mouseenter和on mouseleave之前將它們與元素容器函數on mouseleave一起，但是從語法的角度來看，我不知道該怎么做。 但是同樣，我可能會犯錯。

這是代碼：

$(document).ready(function() {

    $('.box-options').hide();   

    var $boxModule = $('div.box');

    $boxModule.on({

        mouseenter: function() {

            var $this = $(this),                               // repeat                
                $options = $this.find('div.options'),          // repeat
                $optionsBox = $this.find('div.options-box');   // repeat

            var boxHeight = $this.height(),                    // repeat
                boxWidth = $this.width(),                      // repeat
                optionsBoxHeight = $optionsBox.outerHeight();  // repeat

            if ( // statement referring to variables above } 
            else {  // statement referring to variables above };            

            $options.fadeIn(200).addClass('shadow').css({"height" : boxHeight + optionsBoxHeight});
            $optionsBox.delay(100).fadeIn(200).css({"top" : boxHeight}, 200);
        },

        mouseleave: function() {

            var $this = $(this),                                 // repeat
                $options = $this.find('div.options'),          // repeat
                $optionsBox = $this.find('div.options-box');   // repeat

            var boxHeight = $this.height(),                    // repeat
                boxWidth = $this.width(),                      // repeat
                optionsBoxHeight = $optionsBox.outerHeight();  // repeat

            $optionsBox.hide().css({"top" : boxHeight});
            $options.hide().removeClass('shadow').css({"height" : boxHeight}, 200);
        }
    });
});

顯然，代碼包含更多行，但是重要的部分是標記為// repeat變量。 有誰知道我如何重新構造代碼以使變量僅寫入一次？

更新：我更新了代碼以更好地描述邏輯。 為了清楚起見，在每個頁面上還有多個對象，它們具有相同的類，結構和大小，唯一的不同是內容（文本）和id編號。

Answer 1

使用懸停函數，對於變量，在懸停事件之前聲明它們，就像對$boxModule所做的$boxModule 。

調用

$( selector ).hover( handlerIn, handlerOut ) 

是以下內容的簡寫：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Answer 2

您可以在類似事件的外部聲明var：

$('div.box').each(function(){
    var $this = $(this),
        $options = $this.find('div.options'),
        $optionsBox = $this.find('div.options-box'),
        boxHeight = $this.height();

    $this.on({
        mouseenter: function() {...}
        mouseleave: function() {...}
    });
});

Answer 3

如何使一個function返回一個object ，你可以在每個處理器使用？

var calcVars =  function(){
    var $this = $(this),                               
            $options = $this.find('div.options'),      
            $optionsBox = $this.find('div.options-box');

        var boxHeight = $this.height(),                 
            boxWidth = $this.width(),                   
            optionsBoxHeight = $optionsBox.outerHeight();
    return {
        boxHeight: boxHeight, 
        //every other variable you need outside
    }

$boxModule.on({

    firstEvent: function() {

        var object = calcVars.call(this);

        object.calculatedProperty.doSomething();

        //other code 
    },    

    secondEvent: function() {

        var object = calcVars.call(this);

        object.anotherCalculatedProperty.doSomething();

        //other code 
    } 
})

或者您可以執行以下操作：

$boxModule.on("anEvent anotherEvent", function(event) {
 /*
    var declarations
  */  
  var $this = $(this), 
      //etc..

  if(event.type == "anEvent"){
     doStuff();
  else if(event.type == "anotherEvent"){
     doOtherStuff();
  }

})

Answer 4

我認為該代碼中重復的解決方案是創建一個外部函數，以從作為參數傳遞的元素中獲取一些信息。

例如：

function options($element) {
  return $element.find('div.options');
}

基於$（this）的其他所有屬性也是如此。

然后，您可以像這樣在事件處理程序中使用選項： options($this).fadeIn(200)

希望這有助於清理您的代碼。