Die beste Methode zum Optimieren und Zusammenführen dieser Jquery-Funktionen

Question

Ich habe 3 Funktionen, die alle mit Click-Ereignissen eingestellt sind, die die gleichen Funktionen innerhalb ihrer jeweiligen Divs auslösen. Ich möchte das optimieren, also wiederhole ich mich nicht immer wieder. Was wäre der beste Weg dies zu schreiben?

//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

Ich ziehe eine Sache, in einem Ofen zu verbrennen. Wenn Sie eine Sache ändern müssen, müssen Sie sie an einer Stelle ändern.

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); 
     } 
    }); 
}); 

versuchen Array mit entsprechenden Fortschrittsbalken zielen.

Answer 3

Fügen Sie den HTML-Tags, die die Registerkarte darstellen, ein Datenattribut hinzu. Zum Beispiel:

data-progress="#stack" 

data-progress="#design" 

data-progress="#other" 

Definieren Sie eine Funktion, wie folgt aus:

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); 
     } 
    }); 
} 

und als Klick-Handler:

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