ajax数量变化时，总价如何变化？

Question

我使用 jquery 的 append function 将价值转移到另一方。 所以我 append 输入类型号，其值自动等于 1。

问题是，如果我增加输入类型数字的值，如果我增加数字的值，价格如何翻倍？

刀

@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

脚本.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 function 并将所有代码合并为一个。 在下面的代码中，我使用$(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>