Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2019, 12:16
Кандидат Javascript-наук
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 106

Событие onclick для input
Изменила дизайн кнопок 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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2019, 12:34
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,716

live, этот метод из очень древней JQ, у вас что еще допотопная подключается?

if (jQuery(this).hasClass('nc-minus')) .... input.val(value).change(); не понятно что тут. Если вы подменяете управление полем (его кнопки), то есть простой способ без всяких if(какой класс, какая кнопка). Достаточно кнопкам указать значения равные 1, для минуса отрицательное. А затем к текущему значению прибавлять эти значения кнопок, думаю не надо объяснять правила арифметики и что будет.

input[0].valueAsNumber += parseInt(val), где val значение нажатой кнопки.

Зачем .change()?

PS. На свежую голову )

jQuery(document).live, это слишком древнее, подключайте новые версии и используйте метод .on(). Но делегировать обработчик (если есть необходимость) очень далекому предку, это не лучший выбор, делегировать нужно ближайшему родителю гарантированно существующему на странице, в примере это элемент с id "as".

Если изменять значение поля типа number программно, не его кнопками, то проверки крайних его значений с его стороны не будет. Кроме того, в ручном режиме ввода в это поле можно ввести и не цифровые символы. В общем это надо проверять. С учетом новой версии JQ и для примера кнопки, это кнопки, а не div. А для div можно использовать data атрибуты:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="as">
    <button value="-1">-</button> <input type="number" value="1" min="1" max="5" /> <button value="1">+</button><br />
    <button value="-1">-</button> <input type="number" value="1" min="1" max="5" /> <button value="1">+</button>
</div>
<script>
$('#as').on('click', 'button', function() {
    var bt = $(this), n = +bt.val(), num = (~n ? bt.prev() : bt.next())[0]; 
    if(!~n && num.value > num.min || ~n && num.value < num.max) num.valueAsNumber += v //к сожалению ослик не понимает valueAsNumber и нужно num.value = +num.value + v
}).on('input', '[type=number]', function() {
    this.value = this.value.replace(/\D/, ''); 
    if(!this.value) this.value = this.min //здесь тоже нужно проверять крайние значения и устанавливать соответствия 
});
</script>


".change() - на случай, если на изменение этого инпута..." - ну так это проверить можно, в Хроме для есть плагин (вот как дразнится не помню), а в отладчике FF это встроено, все назначенные элементу обработчики событий можно посмотреть в инспекторе кода.

Последний раз редактировалось laimas, 03.09.2019 в 04:58.
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2019, 13:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,633

Julia1991,
может так?
var input = jQuery(this).parent().find('input');
// инпут
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2019, 14:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,633

Julia1991,
данный скрипт должен быть один на всю страницу, а не в каждой карточке свой.
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2019, 15:29
Кандидат Javascript-наук
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 106

Спасибо, теперь все работает
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Input для телефона ekad Элементы интерфейса 2 06.08.2018 02:49
поиск классов внутри тега yozuul jQuery 24 14.06.2013 21:00
Событие клика для label с чекбоксом debugx Events/DOM/Window 2 28.10.2011 08:43
событие для объекта Д-3210 Общие вопросы Javascript 4 15.12.2010 09:31
событие onclick chelsea Общие вопросы Javascript 1 17.09.2010 10:31