兄弟クラス（.priceToCalc）の値を取得し、兄弟をクリックした後に別のクラス（.totalAmt）の値を設定するには

Question

兄弟クラス（.priceToCalc）の値を取得してユーザーが（.numItems）入力に値を入力した後のクラスの値（.totalAmt）。

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

    }); 
}); 

それだけセレクタ.priceToCalcの最初のループの値を返します。

Answer 1

まず、mouseleaveでこれを行うのは少し奇妙です。入力時に計算の変更を確認する方が良いでしょう。これはkeyupを使用して達成できます。実際にあなたが上で計算をベースに必須の子要素を取得するためにfind()、その後、イベントを発生させたinput最寄りtrを見つけるために、DOMのトラバーサルを使用することができる必要が何をすべきか

。このような何か：

$(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