如何编写一个适用于多个元素的jquery插件？

Question

我认为我遇到了jQuery范围的问题。我正在尝试使用经典的jquery“greenify”教程插件，并对其进行了调整以将所有锚链接的颜色更改为由各自的数据颜色属性指定的颜色。但是，颜色总是红色。有人能告诉我我做错了吗？

HTML：

<a data-color="red">Red</a>
<a data-color="yellow">Yellow</a>
<a data-color="black">Black</a>

JS：

(function ( $ ) {
    $.fn.colify = function() {
        this.css( "color", $(this).data('color') );
        return this;
    };
}( jQuery ));
$('a').colify();

JS FIDDLE：http://jsfiddle.net/y4589gy2/

Answer 1

我建议：

(function ($) {
    $.fn.colify = function () {
        // return the results of calling the methods for chaining,
        // note that 'this' refers to the jQuery collection (not DOM nodes):
        return this.css("color", function () {
            // using the anonymous function available to 'css()',
            // this here refers to the individual DOM node over
            // which jQuery is iterating in CSS():
            return $(this).data('color');

        });
    }
})(jQuery);
$('a').colify();

JS Fiddle demo

虽然您不需要在data()电话中调用jQuery或使用css()，但您只需使用HTMLElement.dataset即可访问data-*属性：

(function ($) {
    $.fn.colify = function () {
        return this.css("color", function () {
            // this.dataset.color returns the attribute value from 'data-color',
            // if that returns undefined (or a falsey value) 'black' is used instead:
            return this.dataset.color || 'black';

        });
    }
})(jQuery);

JS Fiddle demo

可以使用this.getAttribute('data-color')代替this.dataset.color（JS Fiddle demo），这可能对支持旧浏览器很有用。

参考文献：

• JavaScript的：
  • HTMLElement.dataset。
  • Element..getAttribute()。
• jQuery的：
  • css()。
  • data()。