0

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

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' class 。我的意思是变量 'this' == 文档而不是 '.menu_text'。问题是如何将其更改为仅对选定对象进行操作？

4

1 回答 1

0

需要注意的是，.delegate()现在已经被.on()几个版本取代了。

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

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

但这更多的是挑剔。

我怀疑问题在于传递.delegate()一个 jQuery 对象作为它的第一个参数。 的文档.delegate()指定第一个参数应为 (signature 1) 字符串、(signature 2) 字符串或 (signature 3) 字符串 - 可能发生的情况是 jQuery 对非字符串举手并应用处理程序到$(document). 这与我在$(document).on()没有选择器的情况下使用时发生的情况相匹配。另一个可能的解释（在测试期间显示）是object在处理程序中使用（也就是选择器匹配的所有内容）将立即淡化所有内容。

以下应该可以工作（在 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');
      });
  }
});

说明：

  1. 扩展 jQuery 对象的函数已经将有问题的对象作为this. 该.on()方法执行设置为原始 DOM 节点的处理程序this，因此我们必须$在使用 jQuery 方法之前调用它。
  2. 我已经删除了委托方法，只是将该方法应用于它传递的所有内容。这应该不是问题。
  3. var objectthis使用inside的能力是完全没有必要的.on()（事实上， usingobject正在产生The Wrong Result）；我刚刚在this.
于 2013-09-06T04:26:35.953 回答