如何使用 java 脚本通过更改用户购物篮中的产品数量来更改总价

Question

我想在更改数量时更改总价。这是视图：@foreach (var item in Model)                    {                        <tr>                            <td>@item.Product.Name</td>                            <td><input type="number" value="@item.Count" id="Count" /></td>                            <td id="Price">@item.Product.Price</td>                            <td id="SumPrice">@item.SumPrice</td>                       </tr>                    }这是我使用的java脚本，但它不起作用。当我更改数量时，总价不会更改。 $('#Count').on('keyup',function(){    var tot = $('#Price').val() * this.value;    $('#SumPrice').val(tot);});

Answer 1

您不能对ids多个元素使用相同的内容，而是使用类。然后，使用$(this).closest("tr")获取最接近的tr参考并使用来获取您需要计算.find的值。td

演示代码：

$('.Count').on('keyup change', function() {

  //get closest tr -> find price class get value

  var tot = $(this).closest("tr").find('.Price').text() * this.value;

  $(this).closest("tr").find('.SumPrice').text(tot); //set value

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td>Abc</td>

    <!--added class-->

    <td><input type="number" value="1" class="Count" /></td>

    <td class="Price">21</td>

    <td class="SumPrice">21</td>

  </tr>

  <tr>

    <td>Xyz</td>

    <td><input type="number" value="1" class="Count" /></td>

    <td class="Price">12</td>

    <td class="SumPrice">12</td>

  </tr>

</table>