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

You can test it out here

创建一个jquery插件

1 个答案: