时间戳

首页 > 解决方案 > 更改电子商务购物车的数量时更改产品价格

javascript - 更改电子商务购物车的数量时更改产品价格

问题描述

我正在尝试增加或减少输入字段中的项目。在这样做时，我还想更新产品价格。控制台中的一切都很好，但我无法访问和更新 html 中的价格。我该怎么做？谢谢你。

我想将新价格添加到：

<td class="total-price">
  <p class="price">
    $200
  </p>
</td>

谢谢你！

/* handling the quantity increase decrease */
$('.js-number').on('click', function() {
  var currentQty = $(this).val()
  var discountedPrice = $(this).attr('data')

  console.log(discountedPrice)

  $('.js-number').change(function() {
    var updatedQty = $(this).val()
    var updatedPrice = discountedPrice * updatedQty
    $(this).val(updatedQty)

    console.log(updatedQty)
    console.log(updatedPrice)
    $(this).closest(".total-price > .price").html(updatedPrice)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="bcart-quantity single-product-detail">
      <div class="single-product-info">
        <div class="e-quantity">
          <input type="number" step="1" min="1" max="999" 
            name="quantity" value="2" title="Qty" class="qty input-text js-number" 
            size="4" data="200">
        </div>
      </div>
    </td>
    <td class="total-price">
      <p class="price">
        $200
      </p>
    </td>
  </tr>
</table>

标签： javascriptjquery

解决方案

我为你准备了这个应该可以工作的脚本。问题是closest

根据 JQuery 文档的closest工作方式是这样的：

对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

所以改变它：

/* handeling the quantity increase decrease */
$('.js-number').on('click', function() {
  var currentQty = $(this).val()
  var discountedPrice = $(this).attr('data')
  var updatedQty = $(this).val()
  var updatedPrice = discountedPrice * updatedQty
  $(this).val(updatedQty)
  $(this).closest("tr").find('.price').text('$' + updatedPrice)
})

推荐阅读