为什么插件没有执行

Question

我创建了一个基本滑块：https://jsfiddle.net/n68pgfvs/

我想做的是，我不想将它变成一个类，而是将它转换成一个插件，这样我就可以在同一页面上多次使用它。

我正在浏览此页面以创建一个简单的开头：https://learn.jquery.com/plugins/basic-plugin-creation/

所以我想出了以下（作为测试）：

<div>
    <div class="test1">This is a test</div>
</div>
<script>
    $(".test1").SliderS({
        color: "#00FF00"
    });
</script>
<script>
    (function ($) {
        $.fn.SliderS = function (options) {
            var settings = $.extend({
                autoSlide: 1,
                timeoutSet: 4000,
                displayNav: 1,
                color: "#F00FFF"
            }, options);

            return this.css({ color: settings.color });
        };
    }(jQuery));
</script>

根据教程，它应该改变文本颜色，但它没有。

我该如何解决？

另外，将我的静态代码从我的滑块转换为插件以多次使用的最佳方法是什么？

Answer 1

您在定义插件之前调用了它。切换顺序，效果很好：

(function($) {
  $.fn.SliderS = function(options) {
    var settings = $.extend({
      autoSlide: 1,
      timeoutSet: 4000,
      displayNav: 1,
      color: "#F00FFF"
    }, options);

    return this.css({
      color: settings.color
    });
  };
}(jQuery));

$(".test1").SliderS({
  color: "#00FF00"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="test1">This is a test</div>
</div>