Comment simplifier mon code avec un for-loop et un .each() à droite?

Question

J'ai besoin de conseils pour revenir à une bonne approche.

J'ai créé 24 champs d'entrée.Un quart d'entre eux avec id = field_analysis + i +, un deuxième trimestre avec id = field_communication + i +, un troisième trimestre avec id = field_outworking + i + et un quatrième trimestre avec id = field_testing + je +.

Vous pouvez demander d'où vient + i +. Je connais le nombre de champs d'entrée. 24/4 = 6. J'ai créé

var inputRowNumber = new Array(6);

.

Mes fonctions pour chaque champ d'entrée ressemblent à l'extrait suivant:

$.each(inputRowNumber, function (i) { 
     $("#field_analysis" + i + "").keypress(pruefe); 
     $("#field_analysis" + i + "").change(myReplace); 
     $("#field_analysis" + i + "").blur(calculate); 
     $("#field_analysis" + i + "").blur(calculateAvg); 
     $("#field_analysis" + i + "").blur(calculateMin); 
     $("#field_analysis" + i + "").blur(calculateMax); 

    }); 

    $.each(inputRowNumber, function (i) { 
     $("#field_communication" + i + "").keypress(pruefe); 
     $("#field_communication" + i + "").change(myReplace); 
     $("#field_communication" + i + "").blur(calculate); 
     $("#field_communication" + i + "").blur(calculateAvg); 
     $("#field_communication" + i + "").blur(calculateMin); 
     $("#field_communication" + i + "").blur(calculateMax); 
    }); 


    $.each(inputRowNumber, function (i) { 
     $("#field_outworking" + i + "").keypress(pruefe); 
     $("#field_outworking" + i + "").change(myReplace); 
     $("#field_outworking" + i + "").blur(calculate); 
     $("#field_outworking" + i + "").blur(calculateAvg); 
     $("#field_outworking" + i + "").blur(calculateMin); 
     $("#field_outworking" + i + "").blur(calculateMax); 
    }); 

    $.each(inputRowNumber, function (i) { 
     $("#field_testing" + i + "").keypress(pruefe); 
     $("#field_testing" + i + "").change(myReplace); 
     $("#field_testing" + i + "").blur(calculate); 
     $("#field_testing" + i + "").blur(calculateAvg); 
     $("#field_testing" + i + "").blur(calculateMin); 
     $("#field_testing" + i + "").blur(calculateMax); 
    });

Ma pensée était de simplifier cet extrait avec une boucle for. J'ai une erreur de raisonnement ici je suppose. 1.Le nombre d'éléments du nouveau tableau (6) n'augmenterait pas, n'est-ce pas? 2.Je ne suis pas sûr de la syntaxe de var mynewtest. 3.la condition devrait être ok. J'ai utilisé var j parce que je pensais que je causerais des problèmes en l'utilisant deux fois dans une fonction. 4. Ma dernière étape était de parcourir l'objet.

Cela devrait le faire. Mais ce n'est pas le cas. Donc, il doit y avoir une erreur. Syntaxe ou erreur logique. Ce est de savoir jusqu'où je suis arrivé:

var inputRowNumber = new Array(6); 
    $.each(inputRowNumber, function (i) {
 

var mynewtest = ['#field_analysis','#field_communication','#field_outworking','#field_testing']; 
for (var j = 0; 0 < mynewtest.length;j++){ 
    $(mynewtest[j] + i + '').keypress(pruefe); 
    $(mynewtest[j] + i + '').change(myReplace); 
    $(mynewtest[j] + i + '').blur(calculate); 
    $(mynewtest[j] + i + '').blur(calculateAvg); 
    $(mynewtest[j] + i + '').blur(calculateMin); 
    $(mynewtest[j] + i + '').blur(calculateMax); 
} 
}); 
 

Comment décririez-vous simplifiera mi premier extrait de code? Voyez-vous mon erreur? J'apprécie votre aide.

Merci d'avance.

Answer 1

I Ne suis pas complètement sûr de ce que vous faites ici, mais ...

var prefixes = ['#field_analysis','#field_communication','#field_outworking','#field_testing']; 
for (var i = 0, prefix; prefix = prefixes[i]; i++) { 
    for (var j = 0; j < 6; j++) { 
     $(prefix + j).keypress(pruefe).change(myReplace).blur(function() { 
      calculate(); 
      calculateAvg(); 
      calculateMin(); 
      calculateMax(); 
     }) 
    } 
} 

Est-ce que cela fonctionne pour vous? Vous voudrez peut-être penser à ajouter un class à toutes ces entrées, quelque chose comme activeField, alors vous pouvez utiliser $('input.activeField').keypress(...

Answer 2

Modifier 1.

Vous pouvez enchaîner les commandes

$("#field_analysis" + i + "").keypress(pruefe); 
    $("#field_analysis" + i + "").change(myReplace); 
    $("#field_analysis" + i + "").blur(calculate); 
    $("#field_analysis" + i + "").blur(calculateAvg); 
    $("#field_analysis" + i + "").blur(calculateMin); 
    $("#field_analysis" + i + "").blur(calculateMax); 

devient

$("#field_analysis" + i).keypress(pruefe) 
          .change(myReplace) 
          .blur(calculate) 
          .blur(calculateAvg) 
          .blur(calculateMin) 
          .blur(calculateMax); 

---

Change 2.

Vous pouvez utiliser add fusionner résultat jquery ensembles ensemble

il devient

$.each(inputRowNumber, function (i) { 
     $("#field_analysis" + i).add("#field_communication" + i) 
           .add("#field_outworking" + i) 
           .add("#field_testing" + i) 
           .keypress(pruefe) 
           .change(myReplace) 
           .blur(calculate) 
           .blur(calculateAvg) 
           .blur(calculateMin) 
           .blur(calculateMax); 
    }); 

---

Amélioration
(pour étendre et éviter une longueur codée en dur des éléments)

Maintenant, si vous voulez éviter d'avoir à montrer en quelque sorte le nombre d'éléments qui existent (comme avec votre tableau) vous pouvez utiliser la starts-with selector

donc enlever finalement la partie de tableau et utiliser

 $("[id^='field_analysis']").add("[id^='field_communication']") 
           .add("[id^='field_outworking']") 
           .add("[id^='field_testing']") 
           .keypress(pruefe) 
           .change(myReplace) 
           .blur(calculate) 
           .blur(calculateAvg) 
           .blur(calculateMin) 
           .blur(calculateMax); 

Answer 3

Une façon simple, vous pouvez simplifier votre code est de chaîner les commandes donc: la majeure partie de votre code devient:

$("#field_outworking" + i + "") 
    .keypress(pruefe) 
    .change(myReplace) 
    .blur(calculate) 
    .blur(calculateAvg) 
    .blur(calculateMin) 
    .blur(calculateMax); 

aussi je vous changer autour de boucles à quelque chose comme:

var mynewtest = ['#field_analysis','#field_communication','#field_outworking','#field_testing']; 
for (var j = 0, len = mynewtest.length; j < len;j++){ 
    for (var i = 0; i <=6; i++){ 
     $(mynewtest[j] + i). 
     // Other code goes here 
    } 
} 

fait juste après avoir votre code relisez pourquoi vous ajoutez tout simplement pas une classe sur à tous les éléments afin qu'ils soient faciles à regrouper. Je veux dire que vous faites exactement la même chose à tous les différents éléments. Ensuite, vous pouvez faire tout cela avec une chaîne:

$(".someClass") 
    .keypress(pruefe) 
    .change(myReplace) 
    .blur(calculate) 
    .blur(calculateAvg) 
    .blur(calculateMin) 
    .blur(calculateMax);