创建一个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是假的.

此外,您的间隔应该在它们点击时而不是之前进行转换,因此对于分钟/小时,即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);

你可以在这里测试一下.