Question

我正在尝试构建我的第一个jQuery插件，但事实证明它比我想象的要困难。

我想要实现的是这样的，你可以命名选择器并传递一行中应该有多少项。

$('#photo-gallery').grid(3);

然后插件函数将选择#photo-gallery的直接子元素的第n个子元素（Xn），其中X是上面传递的选项。在这种情况下，数字是3。

我还想让它选择原始选择器的直接子项#photo-gallery，所以如果我有div，列表项，锚标签或其他任何作为#photo-gallery的直接子项，这些是nth-child（Xn）应用的元素。

这就是我对基本jQuery的看法，但我对如何将其转换为插件感到很沮丧。

$('#photo-gallery div:nth-child(3n)').addClass("end-row-grid-item");
$('#photo-gallery div:nth-child(3n+1)').addClass("new-row-grid-item");

就插件而言，这是我到目前为止所拥有的......

(function($){

    $.fn.extend({

        //pass the options variable to the function
        grid: function(options) {


            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                gridItems: 3
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {

            });
        }
    });

})(jQuery);

就像我说的那样，我完全不知道如何通过我的选择器和选项来完成插件。

非常感谢任何帮助！

Answer 1

如果这真的是你需要制作效果的所有jQuery，那么可能没有必要制作一个插件......如果你愿意的话，可以试试这个：

$.fn.grid = function(count) {
    this.children(':nth-child(' + count + 'n)').addClass('end-row-grid-item');
    this.children(':nth-child(' + count + 'n+1)').addClass('new-row-grid-item');
};

这与您提供的代码示例不完全相同。它只选择直接的子节点，并选择它们是什么类型的元素。这似乎是你需要的。

Answer 2

这应该为您清除如何为插件制作参数：

$(function () {


        $.fn.myPlugin = function (options) {

            var settings = {
                'foo': 'bar'
            };

            return this.each(function () {
                // If options exist, lets merge them
                // with our default settings
                if (options) {
                    $.extend(settings, options);
                }

                alert(settings.foo);


            });
        };


        $('p').click(function () {
            $(this).myPlugin({ foo: 'dd' });
        });

    });

设置中的参数将是默认参数，直到调用pluin时设置它们。一旦设置，它们将覆盖初始值。所以这个人会提醒dd

Answer 3

与已发布的内容几乎相同......

(function($) {
  return $.fn.grid = function(params) {
    params = $.extend({
      gridItems: 3
    }, params);
    this.find(":nth-child(" + gridItems + "n)").addClass("end-row-grid-item");
    this.find(":nth-child(" + gridItems + "n+1)").addClass("new-row-grid-item");
    return this;
  };
})(jQuery);

或在coffeescript中

($) ->

  $.fn.grid = (params) ->

    params = $.extend gridItems: 3, params

    @find(":nth-child(#{gridItems}n)").addClass("end-row-grid-item")
    @find(":nth-child(#{gridItems}n+1)").addClass("new-row-grid-item")
    this

需要一些帮助来构建第一个简单的jquery插件

3 个答案: