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个回答

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

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

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

showbo
支付宝加好友偷能量挖 回复jackleeonlyone: 你自己搞清楚当前值从哪里来的,如果是不同的值要通过each遍历dom后单独初始化,统一调用goalProgress会使用相同的值
12 个月之前 回复
jackleeonlyone
jackleeonlyone 谢谢提醒,已经做出想要的效果了
12 个月之前 回复
jackleeonlyone
jackleeonlyone 就是下面这个效果了,有点。。。。
12 个月之前 回复

图片说明

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jquery动态进度条jqmeter
jQMeter是一款简单使用的轻量级进度条jQuery插件 该效果时设置了进度条宽度,高度,动画时间,计数时间
jquery动态页面加载进度条
jquery动态页面加载进度条
jquery 动态进度条
jquery 实现动态进度条,好看容易实现,很容易看懂
jquery生成的进度条
多种示例,通过不同的方式,实现不同的进度条,有些根据后台进行动态控制
jquery animate实现动态进度条
jquery animate实现动态进度条 <!DOCTYPE html> <html> <head> <title>临时停车</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" conten
基于JQuery的动态进度条,酷!
基于JQuery的动态进度条,使用简单方便: $("#processbar").progressBar(30);
JQuery问题求大神指点
![图片说明](https://img-ask.csdn.net/upload/201512/09/1449639048_694821.jpg)n这个题是怎么做的???
卡住了,关于进度条的,请大神指点
using System;rnusing System.Collections.Generic;rnusing System.ComponentModel;rnusing System.Data;rnusing System.Drawing;rnusing System.Linq;rnusing System.Text;rnusing System.Threading.Tasks;rnusing System.Windows.Forms;rnrnusing System.Diagnostics;rnrnnamespace cccrnrn public partial class Form1 : Formrn rn public Form1()rn rn InitializeComponent();rn rnrn private void button1_Click(object sender, EventArgs e)rn rnrnrn Process mycmd = new Process();rn mycmd.StartInfo.FileName = "cmd.exe"; //设置程序名称rn mycmd.StartInfo.Arguments = "/c" + " dir /b /s /ad " + "\"" + xph.Text;rn mycmd.StartInfo.UseShellExecute = false; //关闭SHELL的使用rn mycmd.StartInfo.CreateNoWindow = true; //关闭窗口rn mycmd.StartInfo.RedirectStandardInput = true; //获取或设置一个值,该值指示应用程序的输入是否从 Process.StandardInput 流中读取rn mycmd.StartInfo.RedirectStandardOutput = true; //获取或设置一个值,该值指示是否将应用程序的输出写入 Process.StandardOutput 流中。rn mycmd.StartInfo.RedirectStandardError = true; //获取或设置一个值,该值指示是否将应用程序的错误输出写入 Process.StandardError 流中。rn mycmd.Start();rn this.jieguo.Text = mycmd.StandardOutput.ReadToEnd();rn mycmd.Close();rnrn rnrn private void button2_Click(object sender, EventArgs e)rn rn this.fph.ShowDialog();rn this.xph.Text = fph.SelectedPath;rn rnrn private void button3_Click(object sender, EventArgs e)rn rn this.jieguo.Text = "";rn rn rnrnrnrnrn另外加了一个progressBar控件,用来显示运行过程rnrn这个程序的意思是 执行一个DOS命令,(都知道有些DOS命令比较耗时间,有时候就像假死一样)在执行的过程中递增进度条,等执行完了就100%,尝试过好几种办法,没有成功,只能求助各位大神了rnrn另外,textbox.text属性输出的结果总是在第一行,可以往下拉,请问怎么让它结果是最后一行,或者干脆运行过程中同步显示DOS在执行中的内容,不知道大神们明白不明白我说的意思rnrn再次感谢大神们了,谢谢了,希望能帮忙
无法用rmic生成存根和主干,求大神指点
[img=https://img-bbs.csdn.net/upload/201403/05/1394018229_361238.jpg][/img]rn最近刚接触java web,网上没有查到解决方法,环境变量应该没有配置错误[img=https://img-bbs.csdn.net/upload/201403/05/1394018435_161051.png][/img][img=https://img-bbs.csdn.net/upload/201403/05/1394018442_871196.png][/img]
前端小白求各位大神指点
在培训机构学习前端已经有一点时间了 ,html和css学完之后,写静态页还是问题百出,框架结构搞不清楚,很混乱,请前辈们指点一下。
jQuery绿色简洁动态进度条代码.zip
jQuery绿色简洁动态进度条代码基于jquery.min.js制作,没有用到背景图,代码简单易懂,上下标随上传进度变化。
多个常用的进度条多个常用的进度条
多个常用的进度条 适合上传、等待….GIF
jQuery生成html代码无法使用
[code=JScript]rnfunction createLoginDialog()rn var obj = $(" ").attr("title","用户登陆").attr("id","dialogTest");rn var form = $(" ").attr("name","loginForm").attr("onSubmit","return check()").attr("action","doManage/doLogin.jsp").attr("method","post");rn var divForm = obj.append(form);rn var username = $("").text("用户名:");rn objobj = divForm.append(username);rn var userinput = $("").attr("class","input").attr("type","text").attr("maxLength","20").attr("size","40").attr("name","uname");rn objobj = divForm.append(userinput);rn var br = $(" ");rn divForm.append(br);rn var password = $("").text("密 码:");rn objobj = divForm.append(password);rn var passinput = $("").attr("class","input").attr("type","password").attr("maxLength","20").attr("size","40").attr("name","upass");rn objobj = divForm.append(passinput);rn divForm.addClass('flora').dialog(rn width:350,rn height:200,rn modal : true,rn bgiframe : true,rn resizable: false,rn buttons:rn '登陆':function()rn $("FORM:first").submit();rn ,rn rn );rn rn[/code]rnrn以上是我用jQuery写的,然后到了doManage/doLogin.jsp就不识别2个文本框:uname和upass了,大小写检查无错误。rn我同样直接使用html代码就可以正确使用....
动态进度条
视频播放进度条
生成进度条(动态生成文件,并前端显示生成进度)
java中实现生成进度条
jquery 进度条
jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条
JQuery进度条
小型的Jquery,js进度条,合适所有的语言
jquery进度条
简单易懂的jquery进度条制作,方便学习和使用,启发思路。
进度条 jquery
NULL 博文链接:https://zhibin07.iteye.com/blog/1468688
jQuery进度条
jquery其实是有个进度条插件的,叫做jqueryprogressbar.js,可是想练习一下,就没有用,自己写了点代码。
jquery的进度条
通过使用JQUERY插件,轻松实现JQUERY的进度条
Jquery的进度条
进度条 js进度条 Jquery的进度条。 可控制。
JQuery 进度条
JQuery 进度条 JQuery 进度条 JQuery 进度条
Jquery进度条
http://www.cnblogs.com/lhb25/ http://codecanyon.net/item/jquery-high-quality-loader-apng/full_screen_preview/2618577
jQuery 进度条
jQuery 进度条
Jquery验证的问题 跪求大神指点
小弟js新手一枚 现遇到了一个问题 表单验证的时候 remote里边那个user总是undefine的?rn[code=html]rnrn rnrn rn rn rn rn rnrnrn rn用户名:rn rn密码:rn rn确认密码: rnrnrn rnrnrnrnrn[/code]rn这里边的user 验证为什么一直undefine呢
求大神指点:Jquery ui position问题
点击按钮显示一个div,利用position方法定位,父元素绝对定位在右下角,但是第一次点击按钮显示和第2次显示的位置不一样(本人想要的效果是点击按钮,实现隐藏和显示,但是他的位置不能变),求大神指导rn第一次点击按钮后显示如图rn[img=http://img.my.csdn.net/uploads/201304/08/1365433037_4751.jpg][/img]rn第二次点击按钮后显示如图rn[img=http://img.my.csdn.net/uploads/201304/08/1365433077_5281.jpg][/img]rnrnrnrnrn rn jQuery UI Position - Default functionalityrn rn rn rn rn rn rn rn rn rn rnrn rn rn rn This is the position parent element.rn rn rn rn rn to positionrn rn rn rn rn
JQuery 开关灯问题,求大神指点
n为啥点击只能使之变黑,再点就没反应了呀。。。n```n nnn n n n n n nnn nnnn```nnn
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数