Question

这是我第一次使用woocommerce，当我添加超过1种产品并增加或减少任何产品时，我在购物车页面上遇到了一些问题，这会增加所有产品的数量。

例如：我添加了数量为2的产品a和数量为7的产品b

如果我将产品b增加到8，则产品数量也会增加到8

代码：

<script>
jQuery('.plus').on('click',function(e){
var val = parseInt(jQuery('input[title="Qty"]').val());

jQuery('input[title="Qty"]').val( val+1 );
});

jQuery('.minus').on('click',function(e){
var val = parseInt(jQuery('input[title="Qty"]').val());
if(val !== 0){

jQuery('input[title="Qty"]').val( val-1 );
} });
</script>

即使添加增加产品或减少，价格也会保持不变

HTML输出：goo.gl/h3w4IQ

实际购物车页面：goo.gl/9ynStK

请让我知道为什么这个jQuery代码无法正常工作以及如何根据产品数量增加/降低价格。

Answer 1

在您的jQuery代码中，您在执行加号或减号时选择了所有DOM input。您实际上需要一个特定的选择器来仅更改相邻输入的值。请用这个替换你的代码。我测试了它并且它有效。

jQuery(document).ready(function($) {
    // Attach event on plus
    // We delegate the event to document
    // So that even if there are 100 of plus buttons
    // It would not slow down the page
    $(document).on( 'click', '.plus', function(e) {
        // Get the right element
        var elem = $(this).prev('.qty'),
        // and its value
        val = parseInt( elem.val() );
        // Sanitize the value
        if ( isNaN( val ) ) {
            val = 0;
        }
        if ( val < 0 ) {
            val = 0;
        }
        // Now increase it
        elem.val( ++val ).trigger('change');
    } );

    // Similar appraoch for the minus button
    $(document).on( 'click', '.minus', function(e) {
        // Get the right element
        var elem = $(this).next('.qty'),
        val = parseInt( elem.val() );
        // Sanitize the value
        if ( isNaN( val ) ) {
            val = 0;
        }
        // decrease the value
        val = val - 1;
        // but not a negative
        if ( val < 0 ) {
            val = 0;
        }
        // Set it
        elem.val( val ).trigger('change');
    } );
});

woocommerce购物车与jquery无法正常工作

1 个答案: