black_wolf1894
@black_wolf1894
Junior Front End Developer

Как реализовать следующие чудо?

Всем привет, столкнулся с такой проблемой, нужно реализовать такой же скрипт "Увеличение и уменьшение количества продуктов". Я еще не очень хорошо знаю js, поэтому не знаю как сделать так, чтобы менялось только число, а значение "шт" или "кг" не менялось. Я смог добился только увеличения и уменьшения числа, а как влиять на то, что там будет "шт" или "кг" не знаю как реализовать и чтобы число не отпускалось меньше 1 или 0,1 в зависимости от условия, что там будет, дробное или целое число, пытался поковыряться в скриптах на сайте, но что-то не получается, выручайте друзья!
94f5b4b2cbe4f6942a8eee07f4d9c91c.jpg
Нужно сделать скрипт увеличения и уменьшения количества продуктов, как на сайте указанном выше.
  • Вопрос задан
  • 4757 просмотров
Решения вопроса 3
Symphony
@Symphony Куратор тега CSS
На указанном сайте в виджете проявляется баг - появляется NaN, если вставить текст (это к тому что бы обратили внимание).

1) Как выше написали сделайте под единицу измерения отдельный 'span'.
2) Просто заведите объект с настройками и сравнивайте после действий с минимальным и максимальным значением.

Можно сделать и без span'а. Каждый раз обрабатывать строку откидывая текущую единицу измерения из настроек, а при отрисовке добавлять.

Но вариант cо span лучше.

Пример варианта без span
jsfiddle.net/alex_m_slobodyan/uxurhakw
Ответ написан
Комментировать
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Сверстайте так, чтобы количество было отдельным инпутом, а шт или кг -- отдельным спаном -- так вы сможете менять только число.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
passshift
@passshift
php, js, html5, css
Что если не брать во внимание КГ и ШТ:

pcvector.net/scripts/forms/380-uvelichit-i-umenshi...
Ответ написан
@YemSalat
Нужно работать с моделью (обьектом JS например), а не с домом.
И в инпут рендерить данные из модели, а не как у вас делается.

И еще - parseInt(блабла, 10) - нужно добавлять radix 10, иначе старые браузеры (ИЕ8 например) превратят "08" в "0", а не в "8"
Ответ написан
Комментировать
@jmaks13
Все очень просто.
1. Создаем структуру. Кнопки, input и так далее.
Записываем отдельно в скрытый input количество (это будет наш настоящий инпут, из которого мы отправим данные на сервер), без шт. и прочего, а input на картинке будет у нас только для отображения информации.
2. Вешаем события на "+" и "-", так, чтобы скрытый input увеличивался, а в видимый пишем текст - текущее значение скрытого input + шт.
3. Профит. Радуемся.

p.s. Если нужна обработка ввода цифр в этот input (видимый), то ставим на него событие изменения и после изменения приводим значение input'a к числу, проверяем число, что оно не меньше 1, и вставляем в оба input (в видимый приписываем шт.), если же число отрицательное или ноль, то ставим принудительно 1 шт.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы