帶有遞增按鈕的輸入字段 Jquery 無法正常工作

Question

我有一個加減號和一個輸入按鈕。 輸入從 1 開始，如果單擊 + 按鈕，它必須添加 +1，如果單擊 - 它會減少 1。現在我有這個 html div 35x：

35 倍相同的 div，因為有 35 個產品，每個產品都有一個 +/- 按鈕。 瘋狂的是，如果我使用此代碼單擊 +，它會加起來 35（計算產品），我只希望單擊的一個增加 1。我做錯了什么？

jQuery( function( $ ) {
            if ( ! String.prototype.getDecimals ) {
                String.prototype.getDecimals = function() {
                    var num = this,
                        match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
                    if ( ! match ) {
                        return 0;
                    }
                    return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
                }
            }
            // Quantity "plus" and "minus" buttons
            $( document.body ).on( 'click', '.plus, .minus', function() {
                var $qty        = $( this ).closest( '.quantity' ).find( '.qty'),
                    currentVal  = parseFloat( $qty.val() ),
                    max         = parseFloat( $qty.attr( 'max' ) ),
                    min         = parseFloat( $qty.attr( 'min' ) ),
                    step        = $qty.attr( 'step' );

                // Format values
                if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
                if ( max === '' || max === 'NaN' ) max = '';
                if ( min === '' || min === 'NaN' ) min = 0;
                if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

                // Change the value
                if ( $( this ).is( '.plus' ) ) {
                    if ( max && ( currentVal >= max ) ) {
                        $qty.val( max );
                    } else {
                        $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
                    }
                } else {
                    if ( min && ( currentVal <= min ) ) {
                        $qty.val( min );
                    } else if ( currentVal > 0 ) {
                        $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
                    }
                }

                // Trigger change event
                $qty.trigger( 'change' );
            });
        });

PHP：

/**
 * Adjust the quantity input values
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Adding embeding <form> tag and the quantity field
        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
            '<form class="cart">',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            $product->add_to_cart_text(),
            '</form>'
        );
    }
    return $html;
}

Answer 1

您似乎對此過於復雜。 您可以通過使用 jQuery 的 DOM 遍歷方法來修改與單擊的按鈕相關的輸入來實現您所需要的：

 $('.amend').on('click', function() { $(this).siblings('.qty').val((i, v) => parseInt(v, 10) + $(this).data('inc')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quantity"> <button class="amend" type="button" data-inc="-1">-</button> <input type="number" step="1" min="0" name="quantity" value="1" title="Aantal" class="input-text qty text" size="4"> <button class="amend" type="button" data-inc="1">+</button> </div> <div class="quantity"> <button class="amend" type="button" data-inc="-1">-</button> <input type="number" step="1" min="0" name="quantity" value="1" title="Aantal" class="input-text qty text" size="4"> <button class="amend" type="button" data-inc="1">+</button> </div> <div class="quantity"> <button class="amend" type="button" data-inc="-1">-</button> <input type="number" step="1" min="0" name="quantity" value="1" title="Aantal" class="input-text qty text" size="4"> <button class="amend" type="button" data-inc="1">+</button> </div>