.each()绑定悬停事件并传递一个变量给处理函数

.each() bind hover events and pass a variable to handler functions

本文关键字：一个 变量 处理函数 悬停 绑定 事件 each      更新时间：2023-09-26

我试图将悬停事件绑定到一些元素，用$遍历它们。每个，我想传递一个css类名作为悬停的处理程序函数的参数的特性，但似乎范围不是我所期望的。我试过

$(document).ready(function () {
    var $madewithLabels = $("#made-with .label");
    // Binding
    $madewithLabels.each(function (index) {
       // get bootstrap css classname for the current element in the loop
       var bsClass = getHoverClass($(this));
       console.info("css class is: " + bsClass + " - " + typeof(bsClass));
       $(this).hover(
           function (bsClass) {
               console.info(bsClass);
               $(this).addClass(bsClass);
           },
           function (bsClass) {
               console.info(bsClass);
               $(this).removeClass(bsClass);
           }
       );
    });
});
  • 第一个console.info: getHover()获得正确的css类名(字符串)当事件被绑定(在文档就绪)
  • 第二/第三控制台。info:当悬停的处理函数执行bsClass是一个对象(我猜它是一个jQuery)

我是这样解决的:

$(document).ready(function () {
    var $madewithLabels = $("#made-with .label");
    // Binding
    $madewithLabels.each(function (index) {
        $(this).hover(
            function () {
                $(this).addClass(getHoverClass($(this)));
            },
            function () {
                $(this).removeClass(getHoverClass($(this)));
            }
        );
    });
});

但我的问题是……

使用$(this)是正确的解决方案吗?

为什么当我传递一个字符串变量到处理函数我得到一个对象时，函数被调用?是因为一些类型转换吗?是因为闭包作用域吗?

感谢jQuery大师的回答!

你在悬停回调中得到的是一个Event对象，正如文档中提到的:

handlerIn

类型:Function(Event eventObject)

当鼠标指针进入元素时执行的函数。

那么在你的第一个例子中改变:

function (bsClass) {

: 

function () {

所以你继续使用你之前计算的原始bsClass

相关文章：