編寫和編譯一個簡單的jQuery插件

Question

我正在嘗試編譯一個基本的jQuery插件，該插件在調用時在提供的選項上顯示div：

• 選擇是否應在X毫秒后或滾動X px后選中一個復選框，
• 如果選擇了這兩個選項之一，則以px為單位設置延遲值或滾動距離
• 否則什么都不做

所需選項的示例調用：

    $(document).ready( function() {
        $('#testInput').testing({
            myMethod      : delay,
            myValue       : 2000
        });
});

我目前在這里取得的進展： JSFiddle （與目前的學習曲線尚不多）

Answer 1

經過一番擺弄之后，我設法使它正常工作。 插件似乎運行良好。 除非滾動功能存在一些錯誤，否則我必須對它進行額外的整理-它循環並無限期地更改復選框狀態，而不僅僅是一次。

這是一個工作的小提琴

並修改代碼：

(function($) {

$.fn.testing = function( options ) {

    // Settings
    var settings = $.extend({
        delay           : null,
        delayTime       : null,
        scrolling       : null,
        scrollDist      : null
    }, options);

    return this.each( function() {
        var self = this;

        // Timeout
        setTimeout(function (){
           $(self).prop('checked', settings.delay);
        }, settings.delayTime);

        // Scroll
       if ($(window).scrollTop() > settings.scrollDist) {
          $(this).prop('checked', settings.scrolling);
       };

    });

}

}(jQuery));

// Plugin invoke
$(window).on("load resize scroll",function(){
    $('#testInput').testing({
        delay             : false,
        delayTime         : null,
        scrolling         : true,
        scrollDist        : 20,
    });
});