如何获取兄弟类（.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来实现。

要实际执行您所需的操作，可以使用DOM遍历来找到最接近input的tr事件，然后find()检索所需的子元素以进行计算。事情是这样的：

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