jquery - 创建一个 jquery 插件

Question

这是我第一次尝试创建 jquery 插件，所以我认为 id 开始很简单，但即使这样也很麻烦......

这是我的代码。

(function($){
$.fn.elapsed = function(options) {
    var defaults = { seconds: true, minutes: true, hours: true, days: true };
    var options = $.extend(defaults, options);
    var ob = $(this);
    var secs = 0, mins = 0, hours = 0, days = 0;
    function elapsed_time( secs, mins, hours, days ){
        if( secs == 59 ) { mins++; secs = 0; }
        if( mins == 59 ) { hours++; mins = 0; }
        if( hours == 23 ) { days++; hours = 0; }
        ob.html( ( days === true ? days + ':' : false ) + ( hours === true ? hours + ':' : false ) + ( mins === true ? mins + ':' : false ) + ( secs === true ? secs + ':' : false ) );
        window.setTimeout( function(){ secs++; elapsed_time( secs, mins, hours, days ); }, 1000 );
    }
    elapsed_time( secs, mins, hours, days );    
};
})(jQuery);

似乎什么也没发生...谁能告诉我哪里出了问题？

Answer 1

您在显示中使用了相同的变量名称，我认为这是无意的，如下:

ob.html( ( days === true ? days + ':' : false ) + 
         ( hours === true ? hours + ':' : false ) + 
         ( mins === true ? mins + ':' : false ) + 
         ( secs === true ? secs + ':' : false ) );

应该更像这样:

ob.html( ( options.days ? days + ':' : '') + 
         ( options.hours ? hours + ':' : '') + 
         ( options.minutes ? mins + ':' : '' ) + 
         ( options.seconds ? secs : '') );

在这些条件中，如果显示该间隔，则希望显示分隔符，如果不显示，则不显示 false 或 0 (我认为这是无论如何，你的意图)。由于这里的 secs 从 0 开始，所以它根本没有改变，因为 0 是 false。

<小时/>

此外，您的间隔时间应该在它们到达时而不是在之前发生变化，因此对于分钟/小时，即 60 和第 24 天，如下所示:

if( secs == 60 ) { mins++; secs = 0; }
if( mins == 60 ) { hours++; mins = 0; }
if( hours == 24 ) { days++; hours = 0; }

....最后一个 this 已经是插件内的 jQuery 对象，所以你可以这样做:

var ob = this;

总的来说，看起来像这样:

(function($){
$.fn.elapsed = function(options) {
    var defaults = { seconds: true, minutes: true, hours: true, days: true };
    var options = $.extend(defaults, options);
    var ob = this;
    var secs = 0, mins = 0, hours = 0, days = 0;
    function elapsed_time( secs, mins, hours, days ){
        if( secs == 60 ) { mins++; secs = 0; }
        if( mins == 60 ) { hours++; mins = 0; }
        if( hours == 24 ) { days++; hours = 0; }
        ob.html( ( options.days ? days + ':' : '') + 
                 ( options.hours ? hours + ':' : '') + 
                 ( options.minutes ? mins + ':' : '' ) + 
                 ( options.seconds ? secs : '') );
        window.setTimeout( function(){ secs++; elapsed_time( secs, mins, hours, days ); }, 1000 );
    }
    elapsed_time( secs, mins, hours, days );    
};
})(jQuery);

You can test it out here .