Wie bekomme ich den Wert einer Geschwisterklasse (.priceToCalc) und legen Sie den Wert einer anderen Klasse (.totalAmt) nach einem Klick auf ein Geschwister

Question

Wie bekomme ich den Wert einer Geschwisterklasse (.priceToCalc) und setzen Der Wert der Klasse (.totalAmt), nachdem der Benutzer einen Wert in die Eingabe (.numItems) eingegeben hat.

<table> 
    <tr id="mainRow"> 
     <td> 
      @Html.DisplayFor(modelItem => item.CategoryDesc) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.HasPicture) 
     </td> 
     <td id="tdNumItems"> 
      <form asp-controller="Index" name="Quantity"> 
       <p> 
        Quantity: <input type="text" name="quantity" size="3" id="number-@(item.itemKey)" class="numItems"> 
       </p> 
      </form> 
     </td> 
     <td id="uprice-@(item.itemKey)" class="priceToCalc" data-topass="@item.UnitPrice" > 
      @Html.DisplayFor(modelItem => item.UnitPrice) 
     </td> 
     <td> 
      <form asp-controller="Index" name="Amount"> 
       <p id="price"> 
        Amount: <input type="text" name="Amount" size="5" disabled="disabled" id="amt-@(item.itemKey)" class="totalAmt"> 
       </p> 
      </form> 
     </td> 
    </tr> 
</table> 

$(document).ready(function() { 
    $('.numItems').mouseleave(function() { 
     var numberVal = $(this).val(); 
     var idOfAmt = $(event.target).attr('id'); 
     var valueTomult=($("#tdNumItems").siblings('.priceToCalc').text()); 
     idOfAmt = idOfAmt.split('-'); 
     var idOfPrice; //value of next sibling,don't know this either 
     alert(idOfAmt[1] + '- val>' + numberVal + '-amt>' + valueTomult); 

    }); 
}); 

Es gibt nur den Wert der ersten Schleife des Selektors .priceToCalc.

Answer 1

Zuerst tun Sie dies auf mouseleave ist ein bisschen seltsam. Es wäre besser für den Benutzer, die Änderung der Berechnung während der Eingabe zu sehen, was Sie mit keyup erreichen können.

Um tatsächlich zu tun, was Sie benötigen Sie DOM-Traversal verwenden können die input die tr nächsten zu finden, die das Ereignis ausgelöst hat, dann find() die erforderlichen untergeordneten Elemente abgerufen werden auf der Berechnung zugrunde zu legen. Etwas wie folgt aus:

$(document).ready(function() { 
    $('.numItems').keyup(function() { 
     var $row = $(this).closest('tr'); 
     var unitPrice = parseFloat($row.find('.priceToCalc').text()); 
     $row.find('.totalAmt').val(this.value * unitPrice); 
    }); 
}); 

Working Example