好的，这是我第一次尝试创建 jQuery 插件，所以我目前正在结束教程。

到此为止

(function($)
{
    $.tippedOff = function(selector, settings)
    {
        var config = {
            'top':0,
            'left':0,
            'wait':3000
        };
        if(settings){$.extend(config, settings);}

        var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;
    };
})(jQuery);

这适用于更改所提供元素的文本颜色。然而。我想为插件生效的元素添加功能。例如悬停或点击事件。但我现在无法理解这个想法，因为 selector 可以是任何东西。所以我不能像通过普通的 jQuery 方法那样按照特定的方式对某些内容进行硬编码。

那么，有了这个，我该如何在渲染后将这种类型的功能添加到事物中？

最佳答案

创建插件时，很容易把事情搞得过于复杂，所以尽量保持事情的美好和简单。

我为您提供了两个 tippedOff 插件的示例。这里还有一个jsfiddle demo两个插件。

第一个按原样使用您的原始代码(未进行重大更改):

$.tippedOff = function(selector, settings)
    {
        var config = {
            'top':0,
            'left':0,
            'wait':3000
        };
        if(settings){$.extend(config, settings);}

        var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
              //bind mouseenter, mouseleave, click event
                $(this).css({"color":"#F00"})
                .mouseenter(function(){
                  $(this).css({"color":"green"});
                })
                .mouseleave(function(){
                  $(this).css({"color":"#F00"});
                })
                .click(function(){
                  $(this).html('clicked');
                });

            })
        }

        return this;
    };

但是，这个是基于您的原始代码的。基本上，我已经使用 these tips 重构了您的原始代码。 .这就是我个人的做法。我还在下面向您提供了所做更改的细目分类。 (进行了重大更改):

$.fn.tippedOff = function(settings) {
      var config = $.extend( {
          'top':0,
          'left':0,
          'wait':3000,
          'color': 'orange',
          'hoverColor': 'blue'
      }, settings);

      return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color})
          .mouseenter(function(){
             $this.css({ 'color': config.hoverColor });
          })
          .mouseleave(function(){
             $this.css({ 'color': config.color });
          })
          .click(function(){
             $this.html('clicked');
          });
      });
    }

----------------------------------------

分割:

原代码:

$.tippedOff = function(selector, settings) {

已更改:

$.fn.tippedOff = function( settings ) { 

评论:

$.tippedOff 和 $.fn.tippedOff 之间的区别是巨大的!将您的插件添加到 $.fn 命名空间而不是 $ 命名空间将使您不必提供 selector 并使生活更简单。

我个人喜欢this answer ，其中@Chad 指出:

My rule of thumb I follow is: use $. when it is not DOM related (like ajax), and use $.fn. when it operates on elements grabbed with a selector (like DOM/XML elements).

原代码:

if(settings){$.extend(config, settings);}

已更改:

var config = $.extend( {
          'top':0,
          'left':0,
          'wait':3000
      }, settings);

评论:

if 语句是多余的。 .extend()为您完成所有工作。

原代码:

var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;

已更改:

return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color});
});

评论:

使用 return this.each(function(){}) 是一种很好的做法，可以保持可链接性。不仅如此，您将不再需要担心选择器的长度。

*注意:如果您想添加其他事件，请在您的插件中使用不同的方法:jQuery Doc Reference - Authoring Plugins .

希望对您有所帮助，如果您有任何问题，请告诉我!

关于javascript - jQuery 插件 - 如何添加/绑定(bind)事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16066110/