javascript - 如何制作jquery插件？

Question

我是 jquery 的初学者。我不知道如何制作 jquery 插件。我有我的代码片段是否正确？

该错误是由于 init 函数中的 this 关键字而生成的。

错误:TypeError:a 在 jquery.js 中未定义。

请为我提供正确的 jQuery 插件方法

;
(function($, doc, win) {
  "use strict";

  function Widget(el, opts) {
    this.$el = $(el);
    this.init();
  }

  // Plugin definition.
  $.fn.am_custum_slider = function(options) {
    var args = arguments;
    var opts = $.extend({}, $.fn.am_custum_slider.defaults, options);
    return this.each(function() {
      //$.fn.Widget.init(this, opts);
      new Widget(this, opts);
    });

  };
  Widget.prototype.init = function() {
      $(this).append('<ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li><li><img src="slide4.jpg" /></li></ul>');
    },

    // Plugin defaults – added as a property on our plugin function.
    $.fn.am_custum_slider.defaults = {
      sliderWidth: 720,
      sliderHeight: 350,
      animationSpeed: 1000,
      pause: 3000,
      currentSlide: 1,

      noSliders: 5,
      noSlidesPerSlide: 5,

      titleShow: true,
      description: true,
      dataSlider: {
        "slider1": [{
          "Title": "Title 1",
          "Description": "Description 1",
          "imagePath": "images/slider1.jpg"
        }, {
          "Title": "Title 2",
          "Description": "Description 2",
          "imagePath": "images/slider2.jpg"
        }, {
          "Title": "Title 3",
          "Description": "Description 3",
          "imagePath": "images/slider3.jpg"
        }, {
          "Title": "Title 4",
          "Description": "Description 4",
          "imagePath": "images/slider4.jpg"
        }, {
          "Title": "Title 5",
          "Description": "Description 5",
          "imagePath": "images/slider5.jpg"
        }, ]
      }
    };

})(jQuery, document, window);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custum_slider"></div>
<script>
  $(document).ready(function() {
    $(".custum_slider").am_custum_slider();
  });
</script>

Answer 1

你就快到了:)

尝试更改 init 函数，$(this) 似乎无效，因为 this 上下文引用 Widget 对象，而不是 dom..dom 应该是$el

Widget.prototype.init = function () {
    this.$el.append('<ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li><li><img src="slide4.jpg" /></li></ul>');
};