最佳的方式来优化和合并这些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);