jackleeonlyone
jackleeonlyone
2018-09-25 00:48
采纳率: 30.8%
浏览 737

Jquery动态无法生成多个进度条,前端大神指点

图片说明
引用的进度条js文件
!function($){
$.fn.extend({
goalProgress: function(options) {
var defaults = {
goalAmount: 100,
currentAmount: 50,
speed: 1000,
textBefore: '',
textAfter: '',
milestoneNumber: 70,
milestoneClass: 'almost-full',
callback: function() {}
}

        var options = $.extend(defaults, options);
        return this.each(function(){
            var obj = $(this);

            // Collect and sanitize user input
            var goalAmountParsed = parseInt(defaults.goalAmount);
            var currentAmountParsed = parseInt(defaults.currentAmount);

            // Calculate size of the progress bar
            var percentage = (currentAmountParsed / goalAmountParsed) * 100;

            var milestoneNumberClass = (percentage > defaults.milestoneNumber) ? ' ' + defaults.milestoneClass : ''

            // Generate the HTML
            var progressBar = '<div class="progressBar">' + defaults.textBefore + currentAmountParsed + defaults.textAfter + '</div>';

            var progressBarWrapped = '<div class="goalProgress' + milestoneNumberClass + '">' + progressBar + '</div>';

            // Append to the target
            obj.append(progressBarWrapped);

            // Ready
            var rendered = obj.find('div.progressBar');

            // Remove Spaces
            rendered.each(function() {
                $(this).html($(this).text().replace(/\s/g, '&nbsp;'));
            });

            // Animate!
            rendered.animate({width: percentage +'%'}, defaults.speed, defaults.callback);

            if(typeof callback == 'function') {
                callback.call(this)
            }
        });
    }
});

}(window.jQuery);


生成进度条
图片说明

调用进度条

    $(document).ready(function(){

        $('#sample_goal').goalProgress({

            goalAmount: 100,

            currentAmount: 50,

            textBefore: '',

            textAfter: ''

        });

    });

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • showbo
    已采纳

    id一样了吧。。这样的话id选择器只能选出第一个容易,改成属性选择器

     $('[id="sample_goal"]')
    

    而且如果是dom ready执行后动态添加的也没有效果,要在添加后选出新元素重新调用goalProgress进行初始化

    点赞 评论
  • jackleeonlyone
    jackleeonlyone 2018-09-25 01:26

    图片说明

    点赞 评论
  • jackleeonlyone
    jackleeonlyone 2018-09-25 01:40

    图片说明

    点赞 评论

相关推荐