更改電子商務購物車的數量時更改產品價格

Question

我正在嘗試增加或減少輸入字段中的項目。 在這樣做時，我還想更新產品價格。 控制台中的一切都很好，但我無法訪問和更新 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>

Answer 1

我為你准備了這個應該可以工作的腳本。 問題是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)
})