Question

Lets say I have the following jQuery plugin (this is just an example to demonstrate the point):

(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")
        });
    });
});

I.e. by iterating over each one with the .each() method and applying the plugin to each element individually (which kinda makes the this.each() inside the plugin a bit redundant). It feels like I should be able to do something like:

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

但是,我可以不使用(这笔)美元,或因为提及该文件。

由于缺少,但这个网站目前对我来说确实很缓慢,他们必须有几个问题。

Answer 1

<代码>.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);

友情链接