Задать вопрос
black_wolf1894
@black_wolf1894
Junior Front End Developer
javascript

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

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

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

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

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

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

pcvector.net/scripts/forms/380-uvelichit-i-umenshi...
Ответ написан
6 комментариев
6 комментариев
@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 шт.
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка графического приложения с использованием библиотеки javaFx
22 дек. 2024, в 17:15
2000 руб./за проект
Вирусные рилсы для е-коммерс и ВБ
22 дек. 2024, в 17:11
50000 руб./за проект
Допил JS-PHP парсера
22 дек. 2024, в 16:26
2500 руб./за проект
Ещё заказы