我怎样才能在“鼠标输入”和“鼠标离开时”中仅使用一次变量

How can I use variables only once with 'on mouseenter' and 'on mouseleave'?

本文关键字：鼠标 变量 鼠标离开时 一次 离开 输入 鼠标输入      更新时间：2023-09-26

我有多个不同大小的对象，我希望每个对象都显示额外的框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 号。

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

叫 

$( selector ).hover( handlerIn, handlerOut )

是以下的简写：

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

我认为该代码中重复的解决方案是创建一个外部函数，以从作为参数传递的元素中获取一些信息。

例如：

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

基于$(this(的所有其他属性也是如此。

然后，您可以在事件处理程序中使用选项，如下所示：options($this).fadeIn(200)

希望这有助于清理您的代码。

您可以在事件外部声明 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() {...}
    });
});

如何创建一个返回可在每个处理程序中使用的object的function？ 

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();
  }
})
相关文章：