jquery购物车值更改

Question

我写了一个购物车代码。在这种情况下，数量值的每次变化（增加或减少）都应发生价格变化。我试图以相对于数量降低的价格来实现这一目标。我可以更改数量，但不能更改价格字段，因为价格仍为我提供console.log对象类型。谁能指出我做错了吗？

下面是代码：

product.html

            <tr>
                <td class="product-thumbnail">
                  <img src="images/cloth_1.jpg" alt="Image" class="img-fluid">
                </td>
                <td class="product-name">
                  <h2 class="h5 text-black">Top Up T-Shirt</h2>
                </td>
                <!-- The price -->
                <td>$49.00</td>
                <td>
                  <div class="input-group mb-3" style="max-width: 120px;">
                    <div class="input-group-prepend">
                      <button class="btn btn-outline-primary js-btn-minus" type="button">&minus;</button>
                    </div>
                    <input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                      <div class="input-group-append">
                        <button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
                      </div>
                    </div>
                </td>
                <td>
                      <div class="price"></div>
                </td>
                <td><a href="#" class="btn btn-primary btn-sm">X</a></td>
              </tr>
              <tr>
                <td class="product-thumbnail">
                  <img src="images/cloth_2.jpg" alt="Image" class="img-fluid">
                </td>
                <td class="product-name">
                  <h2 class="h5 text-black ">Polo Shirt</h2>
                </td>
                <td>$49.00</td>
                <td>
                  <div class="input-group mb-3" style="max-width: 120px;">
                    <div class="input-group-prepend">
                      <button class="btn btn-outline-primary js-btn-minus" type="button">&minus;</button>
                    </div>
                    <input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
                    <div class="input-group-append">
                      <button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
                    </div>
                  </div>
                </td>
                <td>
                    <div class="price">8</div>
                </td>
                <td><a href="#" class="remove btn btn-primary btn-sm">X</a></td>
              </tr>

main.js

    <script>
    $('.js-btn-minus').on('click', function(e)
        {
            e.preventDefault();
            if ( $(this).closest('.input-group').find('.form-control').val() !=0 && $(this).closest('.input-group').find('.form-control').val() >0)
            {
                $(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
                var va = parseInt($(this).closest('.input-group').find('.form-control').val());
                va = (parseInt(va));
                this.a = va;
                console.log(this.a);
                var price = $(this).closest('tr').find('.price');
                console.log(price.val(parseInt(this.a)));
            } 
        }
 </script>

Answer 1

使用price.html或price.text而不是price.val，然后记住，输入通过.val（）获取值，而其他元素通过.html（）或.text（）获得