如何在 jquery ui 进度条中使用变量

Question

我想根据包装 div 的数据值显示一个 progressbar。

<div class="photo webdesignTag" data-progress="20">
    <div class="photo-image"></div>
    <h2>Example1</h2>
    <div class="progressbar"></div>
</div>
<div class="photo photoshopTag" data-progress="50">
    <div class="photo-image"></div>
    <h2>Example2</h2>
    <div class="progressbar"></div>
</div>

$(".photo").each(function() {
    var ProgressBarContainer = $(this).attr("data-progress");
    $(this).children("h2").html(ProgressBarContainer);
    $(this).children(".progressbar").progressbar({
        value: ProgressBarContainer
    });

谁能帮帮我？

Answer 1

问题是因为您使用 attr() 获取 data-progress 值。 returns 是一个字符串，而 value 属性 需要一个整数。如果您使用 data() 检索值，它将被正确键入：

$(".photo").each(function() {
    var $el = $(this);
    var progressBarValue = $el.data("progress");
    $el.children("h2").html(progressBarValue);
    $el.children(".progressbar").progressbar({
        value: progressBarValue
    });
});

Example fiddle