Question

如何优化以下jquery脚本以使其适用于不同的类：

jsFiddle：http://jsfiddle.net/rvalverde/DaF5H/

jQuery UI：

    var $pG300 = $('#telefono-80').progressbar();
    var pGress300 = setInterval(function() {
            var pVal300 = $pG300.progressbar('option', 'value');
            var pCnt30 = !isNaN(pVal300) ? (pVal300 + 1) : 1;
            if (pCnt30 > 40) {
                    clearInterval(pGress3);
            } else {
                    $pG300.progressbar({
                            value : pCnt30
                    });
            }
    }, 10);


    var $pG3000 = $('#telefono-140').progressbar();
    var pGress300 = setInterval(function() {
            var pVal3000 = $pG3000.progressbar('option', 'value');
            var pCnt30 = !isNaN(pVal3000) ? (pVal3000 + 1) : 1;
            if (pCnt30 > 70) {
                    clearInterval(pGress3);
            } else {
                    $pG3000.progressbar({
                            value : pCnt30
                    });
            }
    }, 10);


    var $pG30000 = $('#telefono-200').progressbar();
    var pGress3000 = setInterval(function() {
            var pVal30000 = $pG30000.progressbar('option', 'value');
            var pCnt30 = !isNaN(pVal30000) ? (pVal30000 + 1) : 1;
            if (pCnt30 > 100) {
                    clearInterval(pGress3);
            } else {
                    $pG30000.progressbar({
                            value : pCnt30
                    });
            }
    }, 10);

示例HTML：

<div id="telefono-80" class="progressbar"></div>
<div id="telefono-140" class="progressbar"></div>
<div id="telefono-200" class="progressbar"></div>

示例优化：

<div value="80" class="progressbar"></div>
<div value="140" class="progressbar"></div>
<div value="200" class="progressbar"></div>

优化js代码的最佳方法是什么？

jsFiddle：http://jsfiddle.net/rvalverde/DaF5H/

Answer 1

我这样做，没有丑陋的间隔：）

HTML

<div class="progressbar" data-value="80"></div>
<div class="progressbar" data-value="140"></div>
<div class="progressbar" data-value="200"></div>

CSS：

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

JS

$('.progressbar').progressbar();
$('.progressbar').each(function () {
  var val = parseInt($(this).data('value'));
  var percent = val * (100 / 200);
  $(this).progressbar('option', 'value', percent);
})

Demo

<强>更新

更好的是，您可以使用create回调来避免额外的迭代，如下所示：

$('.progressbar').progressbar({
  create: function () {
    var val = parseInt($(this).data('value'));
    var percent = val * (100 / 200);
    $(this).progressbar('option', 'value', percent);
  }
});

Demo

Answer 2

我已经重构了你的代码。这样就可以将逻辑封装在一个函数中：

function createProgressBar(DOMbar, value){
    var pGress3000 = setInterval(function() {
        var $pG30000 = DOMbar.progressbar();
        var pVal300 = $pG30000.progressbar('option', 'value');
        var pCnt30 = !isNaN(pVal300) ? (pVal300 + 1) : 1;
        if (pCnt30 > value) {
            clearInterval(pGress3);
        } else {
            DOMbar.progressbar({
                value : pCnt30
            });
        }     
    }, 10); 
}

createProgressBar($('#telefono-80'), 40);
createProgressBar($('#telefono-140'), 70);
createProgressBar($('#telefono-200'), 100);

这是新的Fiddle

当然，最好重命名变量以使其更具描述性。

Answer 3

我已尽可能优化您的代码。基本上我迭代了代码并使用＆＃34; rel＆＃34; 标记

这里是fiddle

<强> HTML：

<div class="parent">
    <div rel="80" class="progressbar"></div>
    <div rel="35" class="progressbar"></div>
    <div rel="50" class="progressbar"></div>
</div>

<强> jQuery的：

$('.parent').find('.progressbar').each(function(){
    var a = parseInt($(this).attr('rel'));
    $(this).progressbar({
        value : a
    });
});

Progressbar每个jquery ui都经过优化

3 个答案:

Demo

Demo