时间戳

首页 > 解决方案 > 递增递减jQuery

jquery - 递增递减jQuery

问题描述

<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。当我单击第二行 (+) 按钮或 (-) 按钮时，我只想要第二个输入增量或减量的值。有人请帮忙。

标签： jquerytwitter-bootstrap-3codeigniter-3

解决方案

您不能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()以避免讨厌的错误。

推荐阅读