在javascript中使用jquery numscroller

Question

尝试动态使用numscroller，但不起作用。

静态使用（工作）：

<span class='numscroller' data-min='1' data-max='1000' data-delay='5' data-increment='10'>1000</span>

动态使用（不起作用）：

    $("#product-total-view").addClass('numscroller');
    $("#product-total-view").text(10000);
    $("#product-total-view").attr('data-delay',5);
    $("#product-total-view").attr('data-increment',10);
    $("#product-total-view").attr('data-min',1);
    $("#product-total-view").attr('data-max',10000);

有什么想法可以吗？

Answer 1

在属性设置后添加numscroller类。

效果很好。
;)

// No CDN for "numscroller"... So look around line #94 (at the bottom) for OP code.

/**
* jQuery scroroller Plugin 1.0
*
* http://www.tinywall.net/
* 
* Developers: Arun David, Boobalan
* Copyright (c) 2014 
*/
(function($){
  $(window).on("load",function(){
    $(document).scrollzipInit();
    $(document).rollerInit();
  });
  $(window).on("load scroll resize", function(){
    $('.numscroller').scrollzip({
      showFunction    :   function() {
        numberRoller($(this).attr('data-slno'));
      },
      wholeVisible    :     false,
    });
  });
  $.fn.scrollzipInit=function(){
    $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>" );
  };
  $.fn.rollerInit=function(){
    var i=0;
    $('.numscroller').each(function() {
      i++;
      $(this).attr('data-slno',i); 
      $(this).addClass("roller-title-number-"+i);
    });        
  };
  $.fn.scrollzip = function(options){
    var settings = $.extend({
      showFunction    : null,
      hideFunction    : null,
      showShift       : 0,
      wholeVisible    : false,
      hideShift       : 0,
    }, options);
    return this.each(function(i,obj){
      $(this).addClass('scrollzip');
      if ( $.isFunction( settings.showFunction ) ){
        if(
          !$(this).hasClass('isShown')&&
          ($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
          ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
        ){
          $(this).addClass('isShown');
          settings.showFunction.call( this );
        }
      }
      if ( $.isFunction( settings.hideFunction ) ){
        if(
          $(this).hasClass('isShown')&&
          (($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.hideShift)<($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))||
           ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))>($(this).outerHeight()+$(this).offset().top-settings.hideShift))
        ){
          $(this).removeClass('isShown');
          settings.hideFunction.call( this );
        }
      }
      return this;
    });
  };
  function numberRoller(slno){
    var min=$('.roller-title-number-'+slno).attr('data-min');
    var max=$('.roller-title-number-'+slno).attr('data-max');
    var timediff=$('.roller-title-number-'+slno).attr('data-delay');
    var increment=$('.roller-title-number-'+slno).attr('data-increment');
    var numdiff=max-min;
    var timeout=(timediff*1000)/numdiff;
    //if(numinc<10){
    //increment=Math.floor((timediff*1000)/10);
    //}//alert(increment);
    numberRoll(slno,min,max,increment,timeout);

  }
  function numberRoll(slno,min,max,increment,timeout){//alert(slno+"="+min+"="+max+"="+increment+"="+timeout);
    if(min<=max){
      $('.roller-title-number-'+slno).html(min);
      min=parseInt(min)+parseInt(increment);
      setTimeout(function(){numberRoll(eval(slno),eval(min),eval(max),eval(increment),eval(timeout))},timeout);
    }else{
      $('.roller-title-number-'+slno).html(max);
    }
  }
})(jQuery);



$("#product-total-view").text(10000);
$("#product-total-view").attr('data-delay',5);
$("#product-total-view").attr('data-increment',10);
$("#product-total-view").attr('data-min',1);
$("#product-total-view").attr('data-max',10000);

// Add the class last!!!
$("#product-total-view").addClass('numscroller');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="product-total-view"></span>