在我的教程网站上,我使用jQuery UI进度条不是作为会改变的进度条,而是作为图片显示给用户,以展示用户完成教程的进度。例如:
我知道这段代码不会起作用,因为jQuery文档说.attr和所有类似的函数只获取集合中第一个元素的属性。
在jQuery中是否有类似的功能?
或者,对于这里展示的XY问题,如果这不可行,我该如何动态设置静态进度条?
提前感谢您。
$(document).ready(function() {
$(.progressbar).progressbar({
value: 50
});
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar"></div>
<span style="text-align: center">50% complete</span>
Lots more stuff here
</body>
然而,我想要的是具有不同值的多个进度条。我想为进度条创建一个类,并为其值创建自定义属性。就像这样:
$(document).ready(function() {
$(.progressbar).progressbar({
value: $(.progressbar).attr("data-progress-value");
});
});
<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% complete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% complete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% complete</span>
</body>
在jQuery中是否有类似的功能?
或者,对于这里展示的XY问题,如果这不可行,我该如何动态设置静态进度条?
提前感谢您。
|| 0
和$el$
前面的+
是做什么用的? - AAM111attr()
返回字符串。|| 0
是为了在属性未定义或不是数字的情况下提供默认值。 - charlietfldata()
。 - charlietfl