ajax中数量变化时如何更改总价？

Question

我使用 jquery 的 append 函数将值传递到另一端。所以我附加输入类型编号，其值自动等于 1。

如果我增加输入类型 number 的值，如果我增加 number 的值，价格如何翻倍？

刀片

@foreach($service->invoices as $invoice)
    <tr>
        <td class="text-right">{{ $invoice->description }}</td>
        <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
                <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
            </div>
        </td>
        <td>
            <div class="form-row justify-content-center">
                <div class="form-group mb-0">
                    <div class="input-group mx-auto mb-0">
                        <div class="number-input amount">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
                            <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td class="cost">{{ $invoice->price }}
        <td class="total"></td>
    </tr>
@endforeach

script.js

<script>
    $('.amount > input[type="number"]').on('input', updateTotal);

    function updateTotal(e){
        var amount = parseInt(e.target.value);

        if (!amount || amount < 0)
            return;

        var $parentRow = $(e.target).parent().parent();
        var cost = parseFloat($parentRow.find('.cost').text());
        var total = (cost * amount).toFixed(2);

        $parentRow.find('.total').text(total);
    }
</script>

css

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number-input {
    border: 2px solid #ddd;
    display: inline-flex;
}

.number-input,
.number-input * {
    box-sizing: border-box;
}

.number-input button {
    outline:none;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 1rem;
    height: 2px;
    background-color: #212121;
    transform: translate(-50%, -50%);
}
.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    font-family: sans-serif;
    max-width: 5rem;
    padding: .5rem;
    border: solid #ddd;
    border-width: 0 2px;
    text-align: center;
}

我输入的号码是这样的。

Answer 1

您可以使用click 和input 事件来实现上述。我已删除 updateTotal 函数并将所有代码合并为一个。在下面的代码中，我使用 $(this).closest('tr') 来获取按钮或输入框所在的最近的 tr，然后我使用 .find 从输入中获取所需值，最后将总计添加到 .total td 。

演示代码：

//when - or + click or qty input
$(".minus , .plus , .quantity").on("click input", function() {
  var selectors = $(this).closest('tr'); //get closest tr
  var quan = selectors.find('.quantity').val(); //get qty
  if (!quan || quan < 0)
    return;
  var cost = parseFloat(selectors.find('.cost').text());
  var total = (cost * quan).toFixed(2);
  selectors.find('.total').text(total); //add total 

})

nput[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="text-right">A</td>
    <td>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
        <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
      </div>
    </td>
    <td>
      <div class="form-row justify-content-center">
        <div class="form-group mb-0">
          <div class="input-group mx-auto mb-0">
            <div class="number-input amount">
              <!--just add minus class-->
              <button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
              <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="cost">13
      <td class="total"></td>
  </tr>
  <tr>
    <td class="text-right">B</td>
    <td>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
        <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
      </div>
    </td>
    <td>
      <div class="form-row justify-content-center">
        <div class="form-group mb-0">
          <div class="input-group mx-auto mb-0">
            <div class="number-input amount">
              <button class="minus" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease"></button>
              <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus" id="increment"></button>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="cost">135
      <td class="total"></td>
  </tr>
</table>