инкремент декремент jquery

Question

<table class="table table-bordered table-striped table-hover table-mc-red" id="myTable">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Description</th>
                                <th>Availability</th>
                                <th>Price</th>
                                <th>Qty</th>
                                <th>Subtotal</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $subtotal = 0; foreach($cart_details as $cart) { ?>
                                <form action="<?php echo base_url('cart/updateCart'); ?>" method="post">
                                <tr>
                                    <input type="text" name="rowId[]" value="<?php echo $cart['rowid']; ?>" style="display: none;">
                                    <td data-title="Product" class="vertical_text">
                                        <img src="<?php echo $cart['options']['image_url']; ?>" class="img-responsive" style="height: 75px;">
                                    </td>
                                    <td data-title="Description" class="vertical_text">
                                        <h5><?php echo $cart['name'] ?></h5>
                                        <p>
                                            <?php echo $cart['options']['desc']; ?>
                                        </p>
                                        <input type="text" name="pincode[]" value="<?php echo $cart['options']['desc']; ?>" style="display: none;">
                                    </td>
                                    <td data-title="Availability" class="vertical_text">
                                        Stock Available
                                    </td>
                                    <td data-title="Price" class="vertical_text">
                                        <span class="p_price"><?php echo $cart['price']; ?></span>
                                    </td>
                                    <td data-title="Qty" class="vertical_text quantity">
                                       <button type="button" class="quantity-left-minus btn btn-danger btn-number"  data-type="minus" data-field="">
                                            <span class="glyphicon glyphicon-minus"></span>
                                        </button> 

                                        <input class="cart-input" type="text" name="qty[]" id="quantity" value="<?php echo $cart['qty']; ?>">
                                         <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field="">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                    </td>
                                    <td data-title="Subtotal" class="vertical_text">
                                        <span class="sub_total_amt"><i class="fa fa-inr"></i> <?php echo number_format($cart['subtotal'], 2); ?></span>
                                    </td>
                                    <td data-title="Action" class="vertical_text">
                                        <button class="button remove" onclick="delete_cart_product('<?php echo $cart['rowid']; ?>');"><i class="fa fa-trash"></i> Remove</button>
                                    </td>
                                </tr>
                                <?php $subtotal = $subtotal+$cart['subtotal']; } ?>

                        </tbody>
                    </table>

это моя таблица с циклом foreach.я использую codeigniter и bootstrap.

$(document).ready(function(){

                var quantitiy=0;
    $('.quantity-right-plus').click(function(e){

    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val());//10

    // If is not undefined

        $('#quantity').val(quantity + 1);


        // Increment

});

 $('.quantity-left-minus').click(function(e){
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val());

    // If is not undefined

        // Increment
        if(quantity>1){
        $('#quantity').val(quantity - 1);
        }
});

});

вот мой код jquery.

и моя проблема в этом коде.

    <td data-title="Qty" class="vertical_text quantity">
        <button type="button" class="quantity-left-minus btn btn-danger btn-number"  data-type="minus" data-field="">
              <span class="glyphicon glyphicon-minus"></span>
        </button> 
        <input class="cart-input" type="text" name="qty[]" id="quantity" value="<?php echo $cart['qty']; ?>">
       <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field="">
           <span class="glyphicon glyphicon-plus"></span>
       </button>
</td>

всякий раз, когда цикл foreach генерирует секунду илив третьей строке идентификатор ввода #quantity одинаков, и когда я нажимаю кнопку второй или третьей строки (+) или (-), значение ввода первой строки увеличивается или уменьшается.это происходит из-за того же id #quantity.я просто хотел, когда я нажимаю кнопку второй строки (+) или (-) значение второго входного приращения или уменьшения.кто-то, пожалуйста, помогите.

Answer 1

Нельзя использовать один и тот же id для нескольких элементов на одной странице.Если вам действительно нужно идентифицировать каждое поле по id, вам нужно убедиться, что оно уникально, например, вы можете добавить к нему счетчик: quantity_1, quantity_2 и т. Д.

Для вашегоВ этом случае лучшим решением было бы вообще удалить атрибут id из поля и найти альтернативный способ найти поле ввода в вашем скрипте увеличения / уменьшения.Мое решение ниже находит поле с классом cart-input в той же ячейке таблицы, что и кнопка, на которую была нажата кнопка.

HTML / PHP

<input class="cart-input" type="text" name="qty[]" value="<?php echo $cart['qty']; ?>">

JavaScript

$('.quantity-right-plus').click(function (e) {
    e.preventDefault();

    var $field = $(this).closest('td').find('.cart-input');
    var quantity = parseInt($field.val(), 10);

    $field.val(quantity + 1);
});

Также убедитесь, что вы всегда указываете аргумент radix в parseInt(), чтобы избежать неприятных ошибок.