jQuery für Schleife hinzufügen [i] zu "ID" #name

Question

Ich bin neu in der Programmierung im Allgemeinen, so dass mein Code wahrscheinlich wie s aussieht .... Ich versuche, das Spielergebnis zu automatisieren (1/X/2) abhängig von der Anzahl der in das Formular eingegebenen Heim- und Auswärtsziele. Daher brauche ich hier Hilfe mit meiner jQuery for-Schleife. Der Code ist unten:

for (var i = 1; i < 51; i++) { 

    $(document).change(function() { 
     if ($('#hg' + [i]).val() > $('#ag' + [i]).val()) { 
      $('#r' + [i]).val('1'); 
     } 
     else if ($('#hg' + [i]).val() < $('#ag' + [i]).val()) { 
      $('#r' + [i]).val('2'); 
     } 
     else { 
      $('#r' + [i]).val('X'); 
     } 
    }) 
} 

Anda, was ich tun, will die Werte in jedem Spiel zu vergleichen. Heimziele gegen Auswärtsziele (# hg1 im Vergleich zu # ag1, # hg2 comp. # Ag2 etc usw.). Das Problem ist, dass ich nicht weiß, wie ich meinen Textfeldnamen ändern kann. Ich mag es so aussehen:

#hg1 
#ag1 
#r1 

#hg2 
#ag2 
#r2 

etc etc., wo die Zahl erhöht, wie [i] tun.

Der Tabellencode unter:

<div asp-validation-summary="ValidationSummary.All"></div> 
<form asp-controller="BetSlip" asp-action="AddBetSlip"> 
    <table> 
     <tr> 
      <td id="teamTdMargin"><label asp-for="HomeGoals1"></label> - <label asp-for="AwayGoals1"></label></td> 
      <td id="resultTextBox"> 
       <input asp-for="HomeGoals1" class="resultTextBox" id="hg1" /> 
      </td> 
      <td id="resultSpacing">-</td> 
      <td> 
       <input asp-for="AwayGoals1" class="resultTextBox" id="ag1" /> 
      </td> 
      <td> 
       <input asp-for="Result1" class="resultTextBox" id="r1" value="" tabindex="999" readonly /> 
      </td> 
     </tr> 
     <tr> 
      <td id="teamTdMargin"><label asp-for="HomeGoals2"></label> - <label asp-for="AwayGoals2"></label></td> 
      <td id="resultTextBox"> 
       <input asp-for="HomeGoals2" class="resultTextBox" id="hg2" /> 
      </td> 
      <td id="resultSpacing">-</td> 
      <td> 
       <input asp-for="AwayGoals2" class="resultTextBox" id="ag2" /> 
      </td> 
      <td> 
       <input asp-for="Result2" class="resultTextBox" id="r2" value="" tabindex="999" readonly /> 
      </td> 
     </tr> 
       <tr> 
      <td><input type="submit" value="Tippa rad" /></td> 
     </tr> 
    </table> 
</form> 

Wahrscheinlich in der HTML-Tabelle Code ausgeführt werden könnte auch statt mich zu wiederholen. Wie auch immer, jede Hilfe wird sehr geschätzt.

Answer 1

Es gibt wirklich keine Notwendigkeit id Attribute zu verwenden und es wird leichter sein, relativ Selektoren zu verwenden, die erhalten Elemente. Ihr Skript ist auch ineffizient und aktualisiert jede Eingabe mit name="Result2", obwohl Sie nur die Eingabe in der entsprechenden Zeile ändern müssen (für alle anderen 49 Zeilen aktualisieren Sie einfach den Wert auf den bereits vorhandenen Wert). Außerdem schlägt das Skript fehl, wenn der Benutzer ein Textfeld löscht oder einen Wert eingibt, bei dem es sich nicht um eine Zahl handelt. Und schließlich Ihre Generierung von vielen ungültigen HTML wegen der doppelten id Attribute (in den <td> Elementen)

Stattdessen behandeln Sie das Änderungsereignis der Textfelder und aktualisieren Sie das Ergebnis der entsprechenden Zeile. Ich schlage auch vor, dass das Ergebnis nur als Text in der Tabellenzelle angezeigt wird, nicht als eine Eingabe (Sie sollten diesen Wert nicht zurück an den Server senden)

Ändern Sie HTML, um einen Klassennamen für die 'Ziele' hinzuzufügen area per

<tr> 
    <td><span>HomeGoals1</span> - <span>AwayGoals1</span></td> 
    <td><input asp-for="HomeGoals1" class="goal home" /></td> 
    <td>-</td> 
    <td><input asp-for="AwayGoals1" class="goal away" /></td> 
    <td class="result"></td> 
</tr> 

und das Skript wäre

$('.goal').change(function() { 
    var row = $(this).closest('tr'); 
    var result = row.find('.result'); 
    result.empty(); 
    var home = row.find('.home').val(); 
    if (home === '' || isNaN(home)) { 
     return; 
    } 
    var away = row.find('.away').val(); 
    if (away === '' || isNaN(away)) { 
     return; 
    } 
    home = Number(home); 
    away = Number(away); 
    if (home > away) { 
     result.text('1'); 
    } else if (home < away) { 
     result.text('2'); 
    } else { 
     result.text('X'); 
    } 
}); 

this fiddle für ein funktionierendes Beispiel finden.

Side Hinweise:

1. Es hat keinen Sinn, nicht gesetzt ein <label> Element, da Ihre aktuelle Nutzung mit Fokus auf die zugehörigen Steuer (die for Attribute der <label> Elemente nicht übereinstimmen, die id Attribute die zugehörige Steuer.
2. Es ist ein wichtiges Thema mit Ihrem Design, wenn Sie Elemente mit name="HomeGoals1", name="HomeGoals2 etc und Ihrer Ansicht zu erzeugen sollte auf einer Sammlung von der Basis eines Modells werden, die Eigenschaften int HomeGoals und int AwayGoals und die html sollte in einer for Schleife von EditorTemplate so das die HTML erzeugt werden, ist name="[0].HomeGoals", name="[1].HomeGoals" usw.

Answer 2

Sie müssen nur die [] loszuwerden und i nur verwenden:

for (var i = 1; i < 51; i++) { 
    $(document).change(function() { 
    if ($('#hg' + i).val() > $('#ag' + i).val()) { 
     $('#r' + i).val('1'); 
    } 
    else if ($('#hg' + i).val() < $('#ag' + i).val()) { 
     $('#r' + i).val('2'); 
    } 
    else { 
     $('#r' + i).val('X'); 
    } 
    }) 
} 

Und es gibt keine change Ereignis für die document. Ich denke, man für das gleiche Element sucht dort:

for (var i = 1; i < 51; i++) { 
    $('#hg' + i).change(function() { 
    if ($('#hg' + i).val() > $('#ag' + i).val()) { 
     $('#r' + i).val('1'); 
    } 
    else if ($('#hg' + i).val() < $('#ag' + i).val()) { 
     $('#r' + i).val('2'); 
    } 
    else { 
     $('#r' + i).val('X'); 
    } 
    }) 
} 

Answer 3

versuchen Sie diesen

for (var i = 1; i < 51; i++) { 
    $(document).change(function() { 
    var elem_hg = '#hg'+i; 
    var elem_ag = '#ag'+i; 
    var elem_r = '#r'+i; 
    if ($(elem_hg).val() > $(elem_ag).val()) { 
     $('#r' + i).val('1'); 
    } 
    else if ($(elem_hg).val() < $(elem_ag).val()) { 
     $(elem_r).val('2'); 
    } 
    else { 
     $(elem_r).val('X'); 
    } 
    }) 
}