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

在定义插件之前，您正在调用插件。切换顺序，它工作正常：

＆＃13;

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

＆＃13;

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

＆＃13;

为什么插件没有执行

1 个答案: