使用JavaScript

Question

尝试使用JavaScript在按钮点击时增加/减少数量。

JavaScript已经编写（并且有效），可以在文本字段中输入新值，文本字段中的值反映新值和总更新（基于价格*数量）。

前面提到的脚本：

<script>
  (function() {
    const className = document.querySelectorAll('.quantity-no')

    Array.from(className).forEach(function(element) {
      element.addEventListener('change', function() {
        const id = element.getAttribute('data-id')

        axios.patch(`/cart/${id}`, {
          quantity: this.value
        })

        .then(function (response) {
          // console.log(response);
          window.location.href = '{{ route('cart.index') }}'
        })

        .catch(function (error) {
          // console.log(error);
          window.location.href = '{{ route('cart.index') }}'
        });
      })
    })
  })();
</script>

增量/减量按钮更新文本字段中的值，但数量的变化不会反映在总数中（基于价格*数量）。

上述代码：

<script>
  function decrementQuantity(qty, rowId) {
    var inputQuantityNo = $('.quantity-no' + rowId);
    var newQuantity = parseInt($(inputQuantityNo).val()) - 1;

    axios.patch(`/cart/${id}`, {
      quantity: newQuantity.value
    })

    .then(function (response) {
      window.location.href = '{{ route('cart.index') }}'
    })

    .catch(function (error) {
      window.location.href = '{{ route('cart.index') }}'
    });
  }
</script>

我没有打算尝试为增量编写脚本。

以下是其他适用的代码：

<div class="col-2">
 <div class="quantity d-flex align-items-center">
  <div class="dec-btn" onclick="decrementQuantity($item->qty, $item->rowId)"> - </div>
  <input type="text" value="{{ $item->qty }}" class="quantity-no" data-id="{{ $item->rowId }}">
  <div class="inc-btn" onclick="incrementQuantity($item->qty, $item->rowId"> + </div>
 </div>
</div>