jackleeonlyone 2018-09-24 16:48 采纳率: 100%
浏览 751
已采纳

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条回答 默认 最新

  • 斯洛文尼亚旅游 2018-09-24 17:07
    关注

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

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥20 求一个简易射频信号综测仪
  • ¥15 esp8266 tally灯 接收端改为发射端
  • ¥30 Labview代码调用access 数据库,相同代码其中一个调用不出来是为什么
  • ¥15 基于51单片机的交通灯系统,找改程序有点急
  • ¥15 java启动jar包后,运行过程中宕机
  • ¥15 进行LM运算过程中出现了无法识别的问题,具体问题如下图
  • ¥500 高有偿提问!求优化设计微信小程序
  • ¥15 matlab在安装时报错 无法找到入口 无法定位程序输入点
  • ¥15 Android Studio webview 的使用问题, 播放器横屏全屏
  • ¥15 删掉jdk后重新下载,Java web所需要的eclipse无法使用
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部