最佳的方式來優化和合並這些jquery功能

Question

我有3個功能，所有設置點擊事件觸發相應的功能，在其各自的div。我想優化這個，所以我不會一遍又一遍地重複自己。寫這個的最好方法是什麼？

//Progress Bar animation when tab clicked 
$('#tab1').click(function() { 
    $('#stack .progress div').each(function() { 
     var display = $(this), 
     currentValue = parseInt(display.text()), 
     nextValue = $(this).attr('data-values'), 
     diff = nextValue - currentValue, 
     step = (0 < diff ? 1 : -1); 
     if (nextValue == '0') { 
      $(display).css('padding', '0'); 
     } else { 
      $(display).css('color', '#fff').animate({ 
       'width': nextValue + '%' 
      }, 'slow'); 
     } 

     for (var i = 0; i < Math.abs(diff); ++i) { 
      setTimeout(function() { 
       currentValue += step 
       display.html(currentValue + '%'); 
      }, 20 * i); 
     } 
    }) 
}); 
$('#tab2').click(function() { 
    $('#design .progress div').each(function() { 
     var display = $(this), 
     currentValue = parseInt(display.text()), 
     nextValue = $(this).attr('data-values'), 
     diff = nextValue - currentValue, 
     step = (0 < diff ? 1 : -1); 
     if (nextValue == '0') { 
      $(display).css('padding', '0'); 
     } else { 
      $(display).css('color', '#fff').animate({ 
       'width': nextValue + '%' 
      }, 'slow'); 
     } 

     for (var i = 0; i < Math.abs(diff); ++i) { 
      setTimeout(function() { 
       currentValue += step 
       display.html(currentValue + '%'); 
      }, 20 * i); 
     } 
    }) 
}); 
$('#tab3').click(function() { 
    $('#other .progress div').each(function() { 
     var display = $(this), 
     currentValue = parseInt(display.text()), 
     nextValue = $(this).attr('data-values'), 
     diff = nextValue - currentValue, 
     step = (0 < diff ? 1 : -1); 
     if (nextValue == '0') { 
      $(display).css('padding', '0'); 
     } else { 
      $(display).css('color', '#fff').animate({ 
       'width': nextValue + '%' 
      }, 'slow'); 
     } 

     for (var i = 0; i < Math.abs(diff); ++i) { 
      setTimeout(function() { 
       currentValue += step 
       display.html(currentValue + '%'); 
      }, 20 * i); 
     } 
    }) 
}); 

Answer 1

我更喜歡在一個爐子燒的一件事。如果你需要改變一件事，你應該需要在一個地方改變它。

function doAnimation() { 
    var display = $(this), 
    currentValue = parseInt(display.text()), 
    nextValue = $(this).attr('data-values'), 
    diff = nextValue - currentValue, 
    step = (0 < diff ? 1 : -1); 
    if (nextValue == '0') { 
     $(display).css('padding', '0'); 
    } else { 
     $(display).css('color', '#fff').animate({ 
      'width': nextValue + '%' 
     }, 'slow'); 
    } 

    for (var i = 0; i < Math.abs(diff); ++i) { 
     setTimeout(function() { 
      currentValue += step 
      display.html(currentValue + '%'); 
     }, 20 * i); 
    } 
} 
//Progress Bar animation when tab clicked 
$('#tab1').click(function() { 
    $('#stack .progress div').each(doAnimation); 
}); 
$('#tab2').click(function() { 
    $('#design .progress div').each(doAnimation); 
}); 
$('#tab3').click(function() { 
    $('#other .progress div').each(doAnimation); 
}); 

Answer 2

var progressTargets = {tab1 : "stack", tab2 : "design", tab3 : "other"}; 
$('#tab1, #tab2, #tab3').click(function() { 
    $("#"+progressTargets[$(this).attr("id")]+' .progress div').each(function() { 
     var display = $(this), 
     currentValue = parseInt(display.text()), 
     nextValue = $(this).attr('data-values'), 
     diff = nextValue - currentValue, 
     step = (0 < diff ? 1 : -1); 
     if (nextValue == '0') { 
      $(display).css('padding', '0'); 
     } else { 
      $(display).css('color', '#fff').animate({ 
       'width': nextValue + '%' 
      }, 'slow'); 
     } 
     for (var i = 0; i < Math.abs(diff); ++i) { 
      setTimeout(function() { 
       currentValue += step 
       display.html(currentValue + '%'); 
      }, 20 * i); 
     } 
    }); 
}); 

嘗試使用數組來定位相關的進度條。

Answer 3

將數據屬性添加到代表選項卡的HTML標記。例如：

data-progress="#stack" 

data-progress="#design" 

data-progress="#other" 

定義一個函數，就像這樣：

function tabClicked() { 
    $($(this).data("progress") + ' .progress div').each(function() { 
     var display = $(this), 
     currentValue = parseInt(display.text()), 
     nextValue = $(this).attr('data-values'), 
     diff = nextValue - currentValue, 
     step = (0 < diff ? 1 : -1); 
     if (nextValue == '0') { 
      $(display).css('padding', '0'); 
     } else { 
      $(display).css('color', '#fff').animate({ 
       'width': nextValue + '%' 
      }, 'slow'); 
     } 

     for (var i = 0; i < Math.abs(diff); ++i) { 
      setTimeout(function() { 
       currentValue += step 
       display.html(currentValue + '%'); 
      }, 20 * i); 
     } 
    }); 
} 

而且使用它作爲一個單擊處理程序：

$("#tab1, #tab2, #tab3").click(tabClicked);