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

Question

[Тимофей Белоусов]

Всем привет, столкнулся с такой проблемой, нужно реализовать такой же скрипт "Увеличение и уменьшение количества продуктов". Я еще не очень хорошо знаю js, поэтому не знаю как сделать так, чтобы менялось только число, а значение "шт" или "кг" не менялось. Я смог добился только увеличения и уменьшения числа, а как влиять на то, что там будет "шт" или "кг" не знаю как реализовать и чтобы число не отпускалось меньше 1 или 0,1 в зависимости от условия, что там будет, дробное или целое число, пытался поковыряться в скриптах на сайте, но что-то не получается, выручайте друзья!

Нужно сделать скрипт увеличения и уменьшения количества продуктов, как на сайте указанном выше.

Comments

[Тимофей Белоусов]

И еще одна просьба, если не трудно будет, добавьте комменты в скрипт, так как охота разобраться как это работает, а не просто взять и вставить на сайт! Заранее огромное спасибо!!!

[1001001 111]

Тимофей Белоусов Вам сюда

[Тимофей Белоусов]

Имя Фамилия: Если бы я был заказчиком какого-либо проекта, то да мне туда, а так я хочу разобраться как это работает, поэтому я написал здесь а не там...

Answer 1

[A K]

Решение онли js
jsfiddle.net/Symphony/ump6oL6y

Comments

[Тимофей Белоусов]

Вот оно!!! Только остался 1 вопрос как быть с дробными числами? Попытался не много потравить, но с моим знанием js (и кривизной рук, на данный момент) не получается)))
Хотел еще спросить, не подскажите какие-нибудь туториалы, книжки по js (желательно на русском).

[A K]

jsfiddle.net/Symphony/ump6oL6y/2
«Девид Фленаган — Javascript». toster.ru/search?q=%D0%BA%D0%BD%D0%B8%D0%B3%D0%B8+...

[karenza]

Скрипт работает хорошо, но если добавить еще один input то он не работает, как тут jsfiddle.net/ump6oL6y/13
Подскажите в чем проблема, спасибо заранее!

[Тимофей Белоусов]

karenza: поменяйте id на классы

Answer 2

[Александр С]

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

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

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

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

Пример варианта без span
jsfiddle.net/alex_m_slobodyan/uxurhakw

Answer 3

[Константин Китманов]

Сверстайте так, чтобы количество было отдельным инпутом, а шт или кг -- отдельным спаном -- так вы сможете менять только число.

Comments

[Тимофей Белоусов]

Можно как вариант, но мне кажется это будет не правильно!

[Константин Китманов]

Тимофей Белоусов: почему?

[Тимофей Белоусов]

Константин Китманов: по идеи это все будет передаваться в корзину и мне кажется это будет не удобно делать, так как надо будет дополнительно находить что там лежит кг или шт, если я правильно думаю. Этот вариант похож на костыль, если можно реализовать это все в одном импуте, я думаю будет правильней сделать все в одном импуте! Как-то так!

[Константин Китманов]

Тимофей Белоусов: взять текстовое содержимое спана несложно вообще-то, и я сомневаюсь, что в корзину вам надо передавать единицы измерения, если честно.
Не, можно, конечно и в одном"импуте" все делать, только кода получается в несколько раз больше (см. коммент Артур Селиванов, а у него ведь даже обработки ошибок нет).

[1001001 111]

Вот прям такой-же скрип(взял из исходников сайта, который вы привели)

[Тимофей Белоусов]

Имя Фамилия: поменяйте значение в imput с кг на шт и попробуйте увеличить. Видите что происходит? Вот поэтому я обратился с помощью, чтобы понять как это работает и что делать, не буду же я писать отдельные функций для "кг" и для "шт". Прочитайте вопрос внимательно...

[Тимофей Белоусов]

Имя Фамилия: Нет я хочу понять как работает на том сайте тот скрипт, почему скрипт один, а в одном imput кг с дробными числами, а в другом шт и целые числа, вот что я пытаюсь узнать из своего вопроса...

[Константин Китманов]

Вы хотите, чтобы вам решили проблему, но слушать умных людей не хотите. Ну удачи.

[Тимофей Белоусов]

Константин Китманов: Я слушаю... Извините если закинул камень в ваш огород. Ничего не остается только как ваш вариант со span'ом. Спасибо за помощь!

Answer 4

[# a r t u r #]

Что если не брать во внимание КГ и ШТ:

pcvector.net/scripts/forms/380-uvelichit-i-umenshi...

Comments

[Тимофей Белоусов]

А откуда эти значения берутся? joxi.ru/LQ2KqR7jIle5rj Они как-то генерируются или их вручную надо прописывать?

[# a r t u r #]

Тимофей Белоусов: удалил.. не советую копировать с их сайта, ужасный код

[Тимофей Белоусов]

Мне нужно именно со значениями, если бы они не нужны были бы, я бы не задавал здесь свой вопрос, я уже гуглил искал, но ничего путного не нашел

[Тимофей Белоусов]

Артур Селиванов: А что тогда посоветуете? Мне эти значения по любому нужны!!!

[# a r t u r #]

Тимофей Белоусов: ну тогда так: берем обозначение единиц конкретного товара, отправляем в функции .plus и .minus и добавляем в итоге к значению, пример как это должно выглядеть jsfiddle.net/1hvLyfpq/1

Дело в том что после отправки этого текстового поля придется удалять Ваши величины перед занесением в корзину, Вам оно надо?

[Тимофей Белоусов]

Артур Селиванов: Нет не надо! Спасибо за помощь, буду делать через span, другого варианта "адекватного" не вижу.

Answer 5

[YemSalat]

Нужно работать с моделью (обьектом JS например), а не с домом.
И в инпут рендерить данные из модели, а не как у вас делается.

И еще - parseInt(блабла, 10) - нужно добавлять radix 10, иначе старые браузеры (ИЕ8 например) превратят "08" в "0", а не в "8"

Answer 6

[jmaks13]

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

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

Comments

[YemSalat]

Нафига скрытый инпут? Почему не хрнить данные в обьекте? Так православнее будет.

[jmaks13]

Можно как угодно, я написал как проще и понятнее, для тех кто еще плохо с js.

[YemSalat]

Сергей Сергеев: То есть скрытый инпут они отредактировать не смогут, а вот объект - запросто?