Question

我创建了自己的悬停功能，可以改变文本的不透明度。它看起来像这样：

jQuery.fn.menuHover = function ()
{
            var object = this;
            $(object).css({'opacity':'0.2'});
            $(document).delegate(object, 'mouseenter', function() {
                $(object)
                    .stop()
                    .animate({opacity: 1}, 'slow');
            });
            $(document).delegate(object, 'mouseleave', function() {
                $(object)
                    .stop()
                    .animate({opacity: 0.2}, 'slow');
            });
   };

然后我调用这个函数：

<script type="text/javascript">
    $(document).ready(function() {
        $('.menu_text').menuHover();    
    });
</script>

它工作正常，但它只适用于整个文档，而只能使用'.menu_text'类。我的意思是变量'this'== document而不是'.menu_text'。问题是如何将其更改为仅与所选对象一起操作？

Answer 1

应该注意的是，.delegate()现已被.on()取代了几个版本。

这不是向jQuery对象添加新方法的推荐方法（$()）。建议的方法是

$.fn.extend({
  menuHover: function() {
    // ...
  }
});

但这更像是一种挑剔。

我怀疑这个问题是将.delegate() jQuery对象作为其第一个参数传递。 The documentation of .delegate()指定第一个参数应该是（签名1）一个字符串，（签名2）一个字符串，或者（签名3）一个字符串 - 可能发生的事情是jQuery在非字符串上抛出它的手而已将处理程序应用于$(document)。这符合我在没有选择器时使用$(document).on()时会发生的情况。另一个可能的解释（在测试期间显示）是在处理程序中使用object（a.k.a.选择器匹配的所有内容）将一次淡出所有内容。

以下应该有效（在jsFiddle中测试）：

$.fn.extend({
  menuHover: function() {
    this
      .css({opacity: '0.2'})
      .on('mouseenter', function () {
        $(this).stop().animate({opacity: 1}, 'slow');
      })
      .on('mouseleave', function () {
        $(this).stop().animate({opacity: 0.2}, 'slow');
      });
  }
});

说明：

扩展jQuery对象的函数已将问题对象称为this。 .on()方法执行处理程序，this设置为原始DOM节点，因此我们必须在使用jQuery方法之前调用$。
我删除了委托方法，只是让方法适用于传递的所有内容。这应该不是问题。
var object完全没必要，可以在this内使用.on()（实际上，使用object生成错误的结果 ）;我刚刚在this上调用了方法。

jQuery - 我的函数获取错误DOM对象的引用

1 个答案: