Блог

Я новичок в jQuery. У меня есть две кнопки, которые показывают счетчик вверх, когда кнопки переключены, номер счетчика должен перезапускаться с нуля до вверх, но он остается прежним с приведенным ниже кодом. Я хочу знать, как он перезапустится.

Это скрипт с функцией кнопки и счетчиком. Счетчик работает от нуля до максимума при загрузке страницы. Как я могу сбросить числа до нуля и снова запустить счетчик с нуля до нуля, когда нажата кнопка-2, и наоборот. (допустим, если я нажму btn2, номер счетчика должен начинаться с нуля и заканчиваться на 40, а когда я нажму btn1, номер счетчика снова должен начинаться с нуля и заканчиваться на 26)

     <script>
         function before(){
             document.getElementById('container-2').style.display = "none";
         document.getElementById('container-1').style.display = "flex";
            
         }
          
         function after(){
             document.getElementById('container-2').style.display = "flex";
         document.getElementById('container-1').style.display = "none";
            
         }
</script> 

<!--script-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>



(function ($) {
    $.fn.countTo = function (options) {
        options = options || {};
        
        return $(this).each(function () {
            // set options for current element
            var settings = $.extend({}, $.fn.countTo.defaults, {
                from:            $(this).data('from'),
                to:              $(this).data('to'),
                speed:           $(this).data('speed'),
                refreshInterval: $(this).data('refresh-interval'),
                decimals:        $(this).data('decimals')
            }, options);
            
            // how many times to update the value, and how much to increment the value on each update
            var loops = Math.ceil(settings.speed / settings.refreshInterval),
                increment = (settings.to - settings.from) / loops;
            
            // references amp; variables that will change with each update
            var self = this,
                $self = $(this),
                loopCount = 0,
                value = settings.from,
                data = $self.data('countTo') || {};
            
            $self.data('countTo', data);
            
            // if an existing interval can be found, clear it first
            if (data.interval) {
                clearInterval(data.interval);
            }
            data.interval = setInterval(updateTimer, settings.refreshInterval);
            
            // initialize the element with the starting value
            render(value);
            
            function updateTimer() {
                value  = increment;
                loopCount  ;
                
                render(value);
                
                if (typeof(settings.onUpdate) == 'function') {
                    settings.onUpdate.call(self, value);
                }
                
                if (loopCount >= loops) {
                    // remove the interval
                    $self.removeData('countTo');
                    clearInterval(data.interval);
                    value = settings.to;
                    
                    if (typeof(settings.onComplete) == 'function') {
                        settings.onComplete.call(self, value);
                    }
                }
            }
            
            function render(value) {
                var formattedValue = settings.formatter.call(self, value, settings);
                $self.html(formattedValue);
            }
        });
    };
    
    $.fn.countTo.defaults = {
        from: 0,               // the number the element should start at
        to: 0,                 // the number the element should end at
        speed: 1000,           // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,           // the number of decimal places to show
        formatter: formatter,  // handler for formatting the value before rendering
        onUpdate: null,        // callback method for every time the element is updated
        onComplete: null       // callback method for when the element finishes updating
    };
    
    function formatter(value, settings) {
        return value.toFixed(settings.decimals);
    }
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
    formatter: function (value, options) {
      return value.toFixed(options.decimals).replace(/B(?=(?:d{3}) (?!d))/g, ',');
    }
  });
  
  // start all the timers
  $('.timer').each(count);  
  
  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});

</script>
 

HTML и CSS кнопки:

 <style>

    .toggle-btn{
        background-color: lightblue;
        display: flex;
        justify-content:center;
        }

    .btn-1{
        width:45px;
        height:20px;
        border-top-left-radius:25px;  
        border-top-right-radius:;  
        border-bottom-right-radius:;  
        border-bottom-left-radius:25px;
          
    }
    .btn-2{
        width:45px;
        height:20px;
        border-top-left-radius:;  
        border-top-right-radius:25px;  
        border-bottom-right-radius:25px;  
        border-bottom-left-radius:;
    }
    .container-1{display:flex;justify-content:center;
    }
    .container-2{display:none;justify-content:center;
    }
</style>

<div class="toggle-btn">

            <button type="button" class=" btn-1" id="button1" onclick=before();>
                btn1
            </button>
            <button type="button" class=" btn-2" id="button2" onclick=after();>
                btn2
            </button>
</div>

<div class="container-1">
            <span class="timer " data-to="26" data-speed="1500"></span> 
</div>

<div class="container-2">
            <span class="timer " data-to="40" data-speed="1500"></span> 
</div>
 

Can anyone help me wit this?— Thanks:)