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

时间:2014-08-11 20:46:10

标签: javascript jquery css each jquery-hover

我正在尝试将悬停事件绑定到某些元素,使用$ .each遍历它们,我希望将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类名(字符串)(在文档就绪)
  • 2nd / 3rd console.info:执行hover的处理函数时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大师的回答!

1 个答案:

答案 0 :(得分:0)

您在悬停回调中获得的是一个Event对象,如the docs所述:

  

handlerIn

     

类型:Function(Event eventObject)

     

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

所以在你的第一个例子中改变:

function (bsClass) {

对此:

function () {

因此,您继续使用之前计算的原始bsClass