Konnte keinen Wert mit jQuery extrahieren

Question

Ich habe eine Funktion, um zu berechnen, wenn es eine Änderung in einem der 3 Eingabefelder gibt und dann diese Antwort anzuzeigen. Ich bin in der Lage, die Funktion auszulösen, wenn es eine Änderung gibt, aber ich bin nicht in der Lage, die Werte von jedem der Eingänge zu erhalten. Im Folgenden finden Sie HTML- und JS-Snippets.

HTML: 
    <div> 
     <table> 
       <tr> 
        <th></th> 
        <th>Base</th> 
        <th class="gen-specific g3 g4 g5 g6">IVs</th> 
        <th class="gen-specific g3 g4 g5 g6">EVs</th> 
        <th></th> 
        <th></th> 
       </tr> 
       <tr class="hp" onchange="hp_calculator()"> 
        <td> 
         <label>HP</label> 
        </td> 
        <td> 
         <input class="base" value="100" /> 
        </td> 
        <td class="gen-specific g3 g4 g5 g6"> 
         <input class="ivs calc-trigger" value="31" /> 
        </td> 
        <td class="gen-specific g3 g4 g5 g6"> 
         <input class="evs calc-trigger" type="number" min="0" max="252" step="4" value="0" /> 
        </td> 
        <td><span class="total">341</span> 
        </td> 
        <td></td> 
       </tr> 
     </table> 
    </div> 

JS:

function hp_calculator() { 
    var hp = $(this).find(".base").val()*$(this).find(".iv calc-trigger").val()+$(this).find(".ev calc-trigger").val(); 

    $(this).find(".total").val(hp); 
} 

Answer 1

Zunächst this wird das Fenster und nicht das Element sein. Übergeben Sie stattdessen das Element in Ihrem Handler und verwenden Sie den Parameter.

<tr class="hp" onchange="hp_calculator(this)"> 

Dann müssen Sie Ihre Klasse Selektoren ändern .class1.class2 für viele Klassenauswahl, und dann .text() den Text des span Element zu ändern. Eine letzte Bemerkung ist, dass Sie sowohl die "s" links in ivs ab und evs:

function hp_calculator(ele) { 
    var hp = $(ele).find(".base").val()*$(ele).find(".ivs.calc-trigger").val()+$(ele).find(".evs.calc-trigger").val(); 

    $(ele).find(".total").text(hp); 
} 

Demo

---

Hinweis

Es ist generell eine schlechte Praxis Ereignishandler inline zu geben. Eher würde ich empfehlen, sie direkt in JavaScript anzuhängen, so wird this funktionieren, wie Sie erwarten würden. Hier ist ein Beispiel, wie würden Sie tun, so in jQuery (demo):

$('.hp').change(function(){ 
    var hp = $(this).find(".base").val()*$(this).find(".ivs.calc-trigger").val()+$(this).find(".evs.calc-trigger").val(); 

    $(this).find(".total").text(hp); 
});