jQuery each（）函數不適用於輸入字段

Question

我有一個購物車選項，其中有一個product選項。 該選項具有文本輸入和加/減選項

標記

<td class="cart-item-qty">
    <div class="quantity-mius">-</div>
    <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
    </div>
    <div class="quantity-plus">+</div>
</td>

there is about 5 to 6 types of input like above

和JavaScript代碼：

var minus = $(".quantity-mius");
var plus = $(".quantity-plus");
var itemValue = $(".cart-main-product-qty");

$(".cart-item-qty").each(function(index) {
    $(this).find(plus).on('click', function(e){
        e.preventDefault();
        increment();
    });
    $(this).find(minus).on('click', function(e){
        e.preventDefault();
        decrement();
    });
});

function increment(){
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }
};

當我按下加號按鈕時，所有輸入中的輸入值都會增加，而當減號時，所有輸入值都會減少。

Answer 1

只需Onclick這些icon上的Onclick即可調用該函數並找到其與該類的sibling並計算值。 嘗試-

$(".quantity-plus").on('click', function(e){
    e.preventDefault();
    increment($(this));
});
$(".quantity-mius").on('click', function(e){
    e.preventDefault();
    decrement($(this));
});

function increment($this){
    itemValue = $this.siblings('.cart-main-product-qty');
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    itemValue = $this.siblings('.cart-main-product-qty');
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }
};

Answer 2

你為什么不這樣嘗試

$(".quantity-plus").on('click', function(e){
    e.preventDefault();
    increment();
});
$(".quantity-mius").on('click', function(e){
    e.preventDefault();
    decrement();
});

會工作的

Answer 3

用increment和decrement一次選擇所有輸入元素（選擇發生在腳本頂部的each調用之外）。

因此，您嘗試在整個輸入集合上調用val()和val(n) ，實際上試圖一次增加和減少所有輸入，但實際上val() （不帶參數）不能像（永遠不要將其與輸入的集合一起使用，而應一次僅輸入一個）。

您應該像使用+和-按鈕一樣在每個控件中使用find選擇輸入，然后將找到的輸入傳遞給這些函數以increment和decrement作為參數，或者您應該在each塊本身中內聯進行增量或減量在單獨的功能中。

Answer 4

這有效：選擇每個input之前manage click event

<script type="text/javascript">

var itemValue = $(".cart-main-product-qty");

$( ".quantity-mius" ).click(function(e) {
    e.preventDefault();
  $( ".cart-main-product-qty" ).each(function( index, element ) {

        console.log('decrement');
        decrement();
    })    
});

$( ".quantity-plus" ).click(function(e) {
    e.preventDefault();
  $( ".cart-main-product-qty" ).each(function( index, element ) {

         console.log('increment');
        increment();
    })
  });


function increment(){
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }


};

</script>

Answer 5

您只需定位與單擊的plus/minus按鈕相關的input元素，因此

 $(".cart-item-qty .quantity-mius").click(function(index) { $(this).closest('td').find('.cart-main-product-qty').val(function(i, val) { var value = +val || 0; return value > 1 ? value - 1 : 0 }) }); $(".cart-item-qty .quantity-plus").click(function(index) { $(this).closest('td').find('.cart-main-product-qty').val(function(i, val) { return +val + 1 || 1; }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class="cart-item-qty"> <div class="quantity-mius">-</div> <div class="quantity"> <input type="text" class="cart-main-product-qty" value="1" /> </div> <div class="quantity-plus">+</div> </td> </tr> <tr> <td class="cart-item-qty"> <div class="quantity-mius">-</div> <div class="quantity"> <input type="text" class="cart-main-product-qty" value="1" /> </div> <div class="quantity-plus">+</div> </td> </tr> <tr> <td class="cart-item-qty"> <div class="quantity-mius">-</div> <div class="quantity"> <input type="text" class="cart-main-product-qty" value="1" /> </div> <div class="quantity-plus">+</div> </td> </tr> <tr> <td class="cart-item-qty"> <div class="quantity-mius">-</div> <div class="quantity"> <input type="text" class="cart-main-product-qty" value="1" /> </div> <div class="quantity-plus">+</div> </td> </tr> </table> 

Answer 6

這有效：

$(document).ready(function(){
    var minus = $(".quantity-mius");
    var plus = $(".quantity-plus");

        $(plus).on('click', function(e){
            e.preventDefault(); 
            $(this).parent().find("input.cart-main-product-qty").val(parseInt($(this).parent().find("input.cart-main-product-qty").val())+1);
        });
        $(minus).on('click', function(e){
            e.preventDefault();
            $(this).parent().find("input.cart-main-product-qty").val(parseInt($(this).parent().find("input.cart-main-product-qty").val())-1);
        });
});

小提琴

Answer 7

您說您在頁面上不止一個。 那是因為購物車中有多個物品嗎？ 我向您的容器元素添加了data-屬性。 只是一個想法。 這可能有助於區分它們。

<td class="cart-item-qty" data-cartItemId="3">
    <div class="quantity-minus">-</div>
    <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
    </div>
    <div class="quantity-plus">+</div>
</td>

您在increment和decrement函數中投射的網太寬。 你需要找到itemValue同樣的方式，你發現plus和minus中的$(this)在你的foreach 。 您需要傳遞一個元素。

如果您在jQuery上檢查文檔，則有一種規定的方法可以將變量傳遞給on調用的事件on 。 jQuery API文檔

嘗試這個：

var minus = $(".quantity-minus");
var plus = $(".quantity-plus");
var itemValue = $(".cart-main-product-qty");

$(".cart-item-qty").each(function(index) {
    // need to use THIS this in a nested context.
    var that = $(this);

    $(this).find(plus).on('click', { target: that.find(itemValue)  }, increment);
    $(this).find(minus).on('click', { target: that.find(itemValue) }, decrement);  
});

function increment(event) {
    event.preventDefault();

    var el = event.data.target;

    newValue = el.val(); 
    newValue++;
    el.val(newValue);
};

function decrement(event) {
    event.preventDefault();

    var el = event.data.target;

    newValue = el.val();
    newValue--;
    if(newValue < 1){
        el.val(0);
    }else{
        el.val(newValue);
    }
};

希望這可以幫助！

Answer 8

您的代碼看起來幾乎正確。 首先更改此代碼

var minus = ".quantity-mius";
var plus = ".quantity-plus";
var itemValue = ".cart-main-product-qty";

使用find時，不需要該對象。 然后html不完整，我使用此代碼使其正常工作

<table>
  <tr>
    <td class="cart-item-qty">
        <div class="quantity-mius">-</div>
        <div class="quantity">
            <input type="text" class="cart-main-product-qty" value="1">
        </div>
        <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
        <div class="quantity-mius">-</div>
        <div class="quantity">
            <input type="text" class="cart-main-product-qty" value="1" >
        </div>
        <div class="quantity-plus">+</div>
    </td>
  </tr>
</table>

雖然js是

var minus = ".quantity-mius";
var plus = ".quantity-plus";
var itemValue = ".cart-main-product-qty";

$(".cart-item-qty").each(function(index) {
    var outer = $(this)
    $(this).find(plus).on('click', function(e){
        e.preventDefault();
        increment(outer.find(itemValue));
    });
    $(this).find(minus).on('click', function(e){
        e.preventDefault();
        decrement(outer.find(itemValue));
    });
});

function increment(item){
    newValue = item.val();
    newValue++;
    item.val(newValue);
};

function decrement(item){
    newValue = item.val();
    newValue--;
    if(newValue < 1){
        item.val(0);
    }else{
        item.val(newValue);
    }
};

請注意，我在函數遞增和遞減中添加了一個參數，因為我想您只想更改相對輸入字段