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

问题描述

| 我正在尝试构建我的第一个jQuery插件，但事实证明它比我想的要困难。 我想要达到的目标是这样的，您在其中命名选择器并传递连续多少个项目。

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

然后，插件函数将选择＃photo-gallery的直接子元素的nth-child（Xn），其中X是上面传递的选项。在这种情况下，数字为3。 我还希望它选择原始选择器＃photo-gallery的直接子代，因此，如果我有div，列表项，anchor标签或任何其他＃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);

就像我说的那样，我对如何传递选择器和选项以完成插件一无所知。 任何帮助将不胜感激！     

解决方法

如果确实是制作效果所需的所有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\');
};

这与您提供的代码示例不完全相同。它仅选择直接子节点，并选择它们是哪种元素。这似乎是您所需要的。     ,这应该为您清除如何为插件设置参数：

$(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\' });
        });

    });

设置中的参数将是您的默认参数，直到调用插件时才进行设置。一旦设置，它们将覆盖初始值。所以这会提醒dd     ,与已经发布的内容几乎相同...

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

或在咖啡脚本中

($) ->

  $.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