Question

我有多个不同大小的对象，我希望每个对象都显示其他框on mouseenter并隐藏on mouseleave。我有一个完美的jquery脚本，我唯一担心的是我重复变量两次，有些东西告诉我这可以在不重复自己的情况下完成。

问题是它们都强烈基于$(this)核心元素，因此我无法使变量成为全局变量。我的猜测是，我应该在调用on mouseenter和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

使用hover函数和变量在悬停事件之前声明它们，就像您为$boxModule所做的那样。

致电

$( selector ).hover( handlerIn, handlerOut )

是：

的简写

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

Answer 2

您可以在事件上声明var outside：

$('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)

希望这有助于清理代码。

如何使用'on mouseenter'和'on mouseleave'只使用一次变量？

4 个答案:

您可以在事件上声明var outside：