Meilleure façon d'optimiser et de fusionner ces fonctions Jquery

Question

J'ai 3 fonctions qui sont toutes définies avec des événements de clic qui déclenchent les mêmes fonctions dans leurs divisions respectives. Je voudrais optimiser cela afin que je ne me répète pas encore et encore. Quelle serait la meilleure façon d'écrire cela?

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

Je préfère brûler une chose dans un seul four. Si vous devez changer une chose, vous devriez la changer à un endroit.

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

essayez d'utiliser ensemble pour cibler les barres de progression pertinents.

Answer 3

Ajoutez un attribut de données aux balises HTML représentant l'onglet. Par exemple:

data-progress="#stack" 

data-progress="#design" 

data-progress="#other" 

Définition d'une fonction, comme ceci:

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

et l'utiliser comme un gestionnaire de clic:

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