时间戳

首页 > 解决方案 > 当值为 100% 时将类添加到 jquery-asProgress.js

javascript - 当值为 100% 时将类添加到 jquery-asProgress.js

问题描述

我正在使用库“jquery-asProgress.js”来生成 100% 完整的条形图。

图书馆可以在这里找到：https ://github.com/thecreation/jquery-asProgress

我想让栏在达到 100% 时改变颜色。

当前代码如下：


        <div class="progress" role="progressbar" data-goal="15" aria-valuemin="0" aria-valuemax="100">
        <div class="progress__bar"><span class="progress__label"></span></div>
        </div>
        <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
        <div class="progress__bar"><span class="progress__label"></span></div>
        </div>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="../dist/jquery-asProgress.js"></script>
  <script type="text/javascript">
    jQuery(function($) {
      $('.progress').asProgress({
            namespace: 'progress',
            bootstrap: false,
            min: 0,
            max: 100,
            goal: 100,
            speed: 10, // speed of 1/100
            easing: 'ease',
            labelCallback: function labelCallback(n) {
                var percentage = this.getPercentage(n);
                return percentage + '%';
            }
      });
        
    $('.progress').asProgress('start');

    });

  </script>

我尝试添加此部分以允许在值为 100 时添加一个类，但这只会破坏 JS

    $('.progress').asProgress({
        var percentage ="100";
        $('progress__bar').addClass("wishlist_100");
    });

编辑：

我已经使用@Roamer-1888 的建议进行了更改，问题在于它们都应用了该类，而不仅仅是 100 的值。

    jQuery(function($) {
        
        $('.progress').asProgress({
            namespace: 'progress',
            bootstrap: false,
            min: 0,
            max: 100,
            goal: 100,
            speed: 10, // speed of 1/100
            easing: 'ease',
            labelCallback: function labelCallback(n) {
                var percentage = this.getPercentage(n);
                return percentage + '%';
            }
    }).on('asProgress::finish', function(e) {
            $('.progress__bar').addClass('wishlist_100');
    }).asProgress('start');
});

标签： javascriptjqueryprogress-bar

解决方案

您需要为finish事件建立一个处理程序；

jQuery(function($) {
    $('.progress').asProgress({
        'namespace': 'progress',
        'bootstrap': false,
        'min': 0,
        'max': 100,
        'goal': 100,
        'speed': 10, // speed of 1/100
        'easing': 'ease',
        'labelCallback': function(n) {
            return `${this.getPercentage(n)}%`;
        }
    }).on('asProgress::finish', function(e) {
        // change colour here.
    }).asProgress('start');
});

推荐阅读