递增递减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 相同，当我单击第二行或第三行 (+) 按钮或 (-) 按钮时，第一行输入的值会递增或递减。

这是因为相同的 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);
});

还要确保始终在 parseInt() 上指定基数参数以避免讨厌的错误。