Question

让我们说我有以下jQuery插件（这只是一个证明这一点的例子）：

(function ($) {
    $.fn.colourise = function (options) {
        var settings = $.extend({
            color: "black"
        }, options);

        return this.each(function () {
            $(this).css("color", options.color);
        });
    };
})(jQuery);

我想申请以下标记：

<div data-color="red">
    This text should be red.    
</div>
<div data-color="blue">
    This text should be blue
</div>
<div data-color="green">
    This text should be green
</div>

如果我想作为插件的一个选项传递的值取决于元素，我该如何应用它？目前我只能这样做：

$(function () {
    // This feels a bit wrong to have to use a .each() here, but how else do we do it?
    $("div").each(function () {
        $(this).colourise({
            color: $(this).data("color")
        });
    });
});

即。通过使用.each（）方法迭代每个元素并将插件单独应用于每个元素（这有点使得插件内的this.each（）有点多余）。感觉我应该能够做到这样的事情：

$(function () {
    $("div").colourise({
        color: [get context of this "div" somehow].data("color")
    });
});

但我不能在这里使用$（this）或this，因为它们引用了文档。

很抱歉缺少http://jsfiddle.net/，但网站目前对我来说真的很慢，他们肯定会遇到一些问题。

Answer 1

.each正是您所需要的。

当您在没有.each回调的多元素集上调用该方法时，您将创建一个单独的选项对象，该对象在插件中用于集合中的每个元素。

如果不为每个元素创建单独的对象，则无法更改每个元素。

Answer 2

进行回调以检索此颜色

function getColor(){
return $.data( this, "color" );
}

将回调作为选项进行着色

$(function () {
    $("div").colourise({
    color: getColor
    });
});

检查颜色选项是否为可调用函数

(function ($) {
    $.fn.colourise = function (options) {
    var settings = $.extend({
        color: "black"
    }, options);

    return this.each(function () {
    var color = options.color;

    color = typeof color =="function" ? color.call( this ) : color;
        $(this).css("color", color);
    });
    };
})(jQuery);

设置jQuery插件选项时参考当前上下文

2 个答案: