Question

我在更新jquery进度条时遇到了一些问题。在页面加载期间，此进度条不在文档中，我只是在用户单击按钮时添加它，如下所示：

$(this).parent().append('<div class="progressbar"></div>');
$(this).parent().children('div.progressbar').show();
$(this).parent().children('div.progressbar').progressbar({value: 20});

然后，使用超时，我正在尝试更新它

function updateProgressBar() {
    $('.progressbar').each(function() {
        myNewValue = getNewValue();
        $(this).progressbar('value', 50);
    });
    setTimeout('updateProgressBar()', 5000);
}
setTimeout('updateProgressBar()', 5000);

调试控制台抱怨说：“未捕获：在初始化之前无法调用进度条上的方法：尝试调用方法'值'” 谷歌搜索这里我发现问题可能与>加载页面后进度条的初始化有关

有人可以帮助我吗？

提前致谢

- 编辑 -

感谢Bryan，我正在尝试你的解决方案，但我不适合我

现在我有了这段代码

function startProgress() { $(this).parent().append('<div class="progressbar"></div>'); $(this).siblings('.progressbar').show(); $(this).siblings('.progressbar').progressbar({value: 0}); function updateProgress() { $('.progressbar').each(function() { myNewValue = getNewValue($(this).parent().parent().attr('id')); $(this).progressbar('value', myNewValue); }); setTimeout('updateProgress', 5000); } setTimeout('updateProgress', 5000); }

控制台说没有updateProgress定义

- 编辑 -
非常感谢!!!

现在我有一个非常明确的版本......

这是我目前的代码

if($(this).siblings('.progressbar').size() == 0) { $(this).parent().append('<div class="progressbar"/>'); $(this).siblings('.progressbar').progressbar({value: 0}); } $(this).siblings('.progressbar').show(); function updateProgress() { $('.progressbar').each(function() { myParams = 'service=' + $(this).parent().parent().attr('id') + '&content=' + $(this).parent().attr('id') myUrl = '/datacast/content_progress/?' + myParams; theValue = $(this).progressbar('value'); $.get(myUrl, {}, function(aReply) { myData = aReply.split(' '); myItemId = myData[0]; myValue = parseInt(myData[1]); try { $(".item[id = " + myItemId + "]").children(".progressbar").progressbar('value', myValue); } catch(myError) { //alert(myError); } }) }); setTimeout(updateProgress, 5000); } setTimeout(updateProgress, 5000);

正如你所看到的，如果已经有一个进度条，我已经添加了一个控件，因为我多次通过该代码。进度条每次都会更新，但是控制台抱怨说“TypeError：无法调用方法'应用'未定义”，所以我不得不添加带有空catch主体的try块来删除错误。该页面有效，但如果您知道为什么会出现该错误
，则可能会很有趣

Answer 1

有同样的问题

显然你必须首次使用格式progressbar({value:30})

如果您第一次使用progressbar(value,30)，则会收到此异常。

Answer 2

好吧，我不敢相信我错过了。问题是你将字符串传递给setTimeout函数。这将导致它在全局范围内查找函数的名称，而不是。

更改这两个电话：

setTimeout('updateProgress', 5000);

到

setTimeout(updateProgress, 5000);

Answer 3

确保您在更新方法中使用与初始化方法中完全相同的选择器。

在提供的代码中，您执行$(this).parent().children().find('.progressbar')之类的操作，然后在更新中执行$('.progressbar')。第二个调用可能会返回第一个调用的项目，而这些项目不会初始化进度条。

这段代码对我来说很好：

$(function(){
    $('body').append('<div class="progress"></div>');

    var val = 10;
    $('.progress').progressbar({value:val});

    function updateProgress() {
        val += 10;
        $('.progress').progressbar('value', val);
        if(val < 100)
            setTimeout(updateProgress, 1000);
    }

    setTimeout(updateProgress, 1000);
});

另外，请记住，您实际上并不需要调用each()，因为jquery方法应该自动应用于与该选择器匹配的所有元素。

示例：

$('.red').each(function(){ $(this).css({color:'red'}); });

是多余的，同样可以通过以下方式实现：

$('.red').css({color:'red'});

哦，这是免费赠品：

$(this).parent().children().find('.progressbar')

可缩短为：$(this).siblings('.progressbar')

更新在运行时添加的JQuery进度条

3 个答案: