Javascript 将相对于选择器的变量传递给多个jQuery事件

我正在寻找一种方法，将与元素相关的变量传递给mouseenter和mouseleave事件。例如，如果我有：

jQuery('.element').on({
    mouseenter: function () {
        var $child = jQuery(this).find('.child');
        $child.fadeIn();
    },
    mouseleave: function () {
        var $child = jQuery(this).find('.child');
        $child.fadeOut();
    }    
});

---

有没有办法避免定义$child变量两次？我可以使用.hover（）来解决这个问题，但是现在我无法使用它，因为我正在对动态生成的元素调用它，而.hover（）对这些元素不起作用

您可以使用这种方式委派两个事件：

jQuery(document).on("mouseenter mouseleave", ".element", function(e){
    jQuery(this).find('.child').fadeToggle();
    // you can check for e.type for more complex logic    
});

使用不同处理程序委派的语法为：

jQuery(document).on({
    mouseenter: function () {
        //...
    },
    mouseleave: function () {
        //...
    }    
}, ".element");

---

使用类似的方式：

jQuery('.element').on({
    mouseenter: function (e) {
        var ele = e.currentTarget;
        ele.fadeIn();
    },
    mouseleave: function (e) {
        var ele= e.currentTarget;
        ele.fadeOut();
    }    
});

---

您可以在两个事件中重用相同的函数，例如：

jQuery('.element').on({
    mouseenter: function () {
        handleFade("enter", jQuery(this));
    },
    mouseleave: function () {
        handleFade("leave", jQuery(this));
    }    
});

function handleFade(state, $elem){
    var $child = $elem.find('.child');
    if(state=="enter"){
        $child.fadeIn();
    } else if(state=="leave"){
        $child.fadeOut();
    }
}

---

在试图简化我的例子时，我可能误导了你。我不是简单地淡入淡出，而是更改.child元素上的CSS值。因此，我确实需要为这两个事件分别定义函数。就像我刚刚在code comment中发布的那样，

您可以检查e.type是否有更复杂的逻辑

使用您的第一个组合示例和

if（e.type==“mouseenter”）{…}else{…}

我需要找到.element的子元素以用作variable@johnnyd23你最好把你要找的东西的相关例子贴出来，而不是不相关的。为什么需要为

.child

使用变量？发布JSFIDLE怎么样？我的问题是“有没有办法避免两次定义$child变量？”