我如何获取同级 class (.priceToCalc) 的值并在单击同级后设置另一个 class (.totalAmt) 的值

Question

如何获取同级 class (.priceToCalc) 的值并在用户将值输入 (.numItems) 后设置 class (.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);

    });
});

它只是returns选择器.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

我如何获取同级 class (.priceToCalc) 的值并在单击同级后设置另一个 class (.totalAmt) 的值

How do I get the value of a sibling class (.priceToCalc) and set the value of another class (.totalAmt) after a click on a sibling

jquery

event-handling

siblings

razor