Изменила дизайн кнопок input type number. Проблема в том что когда у нас есть товары в корзине и при обновлении значения, если больше одного товара в корзине, то прибавляет все количество товаров в корзине. Но в итоге выдает правильное значение, только при обновлении количества выдает не правильно значение. Скрипт срабатывает сразу для всех input
<script>
jQuery(document).live('click', '.number .number_controls > div', function() {
var input = jQuery(this).closest('.number_controls').find('input'); // инпут
var value = parseInt(input.val()) || 0; // получаем value инпута или 0
if (jQuery(this).hasClass('nc-minus')) {
value = value - 1; // вычитаем из value 1
}
if (jQuery(this).hasClass('nc-plus')) {
value = value + 1; // прибавляем к value 1
}
input.val(value).change(); // выводим полученное value в инпут; триггер .change() - на случай, если на изменение этого инпута у вас уже объявлен еще какой-то обработчик
});
</script>
код применила к корзине woocommers на wordpress
<div class="nc-minus"><i class="fas fa-angle-down"></i></div>
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
<input
type="text"
id="<?php echo esc_attr( $input_id ); ?>"
class="<?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<div class="nc-plus"><i class="fas fa-angle-up"></i></div>