Поля ввода с увеличивающимися кнопками Jquery не работают должным образом - PullRequest
0 голосов
/ 15 апреля 2020

У меня есть плюс плюс минус и кнопка ввода. Ввод начинается с 1, и если вы нажмете кнопку +, он должен добавить +1, а если вы нажмете - он уменьшится до 1. Теперь у меня есть html div 35x:

35x такой же 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;
}

1 Ответ

0 голосов
/ 15 апреля 2020

Вы, кажется, слишком усложнили это. Вы можете достичь того, что вам нужно, используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...