Кнопка количества (+/-)

Кнопка количества (+/-)

Owebs
26 марта 2022
Просмотры 312
Рейтинг
Время чтения Время чтения: 4 минуты

Оглавление
Развернуть Свернуть
- +

Сегодня мы научимся делать кнопку подсчёта количества. Это один из наиболее необходимых и часто встречающихся элементов на сайтах. В частности, является неотъемлемым элементом любого интернет-магазина (вы могли заметить его в карточках товаров, либо на странице товаров интернет-магазинов). В основном, используется для выбора количества товара во время покупки, упрощая тем самым процесс покупки для пользователя и делая сайт проще и приятнее в использовании, что является хорошим показателем для привлечения клиентов.

научимся делать кнопку подсчёта количестваиспользуется для выбора количества товара

Для создания данной кнопки вам надо перекопировать следующие части кодов:

HTML:
                <span class="change minus min">
                    <span>-</span>
                </span>
                <input type="text" name="productСount" value="1" disabled="">
                <span class="change plus">
                    <span>+</span>
                </span>
            
CSS:
                .count {
                    display: flex;
                }
        
                .count .change {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 25px;
                    height: 25px;
                    font-weight: 600;
                    color: #fff;
                    background-color: #35e201;
                    border-radius: 3px;
                    cursor: pointer;
                }
        
                .count input {
                    max-width: 55px;
                    text-align: center;
                    font-weight: 700;
                    background-color: #fff;
                    border: none;
                    border-radius: 3px;
                    margin: 0 5px;
                }
        
                .count .minus.min {
                    background-color: #989797;
                }
            
JS:
                document.querySelectorAll('.count .plus').forEach(item => {

                    item.addEventListener('click', function () {
        
                        ++item.parentElement.querySelector('input').value;
        
                        if (item.parentElement.querySelector('input').value > 1) {
        
                            item.parentElement.querySelector('.minus').classList.remove('min');
        
                        }
        
                    });
        
                });
        
                document.querySelectorAll('.count .minus').forEach(item => {
        
                    item.addEventListener('click', function () {
        
                        --item.parentElement.querySelector('input').value;
        
                        if (item.parentElement.querySelector('input').value < 2) {
        
                            item.parentElement.querySelector('input').value = 1
        
                            item.classList.add('min');
        
                        }
        
                    });
        
                });
            

После копирования вышеупомянутых кусков кода, у вас должна появиться вот такая кнопка:

- +

При значении количества равного единице, кнопка уменьшения количества становится серой, указывая пользователю, что меньше одного товара выбрать невозможно. Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы данного элемента, не рекомендуем вносить изменения в структуру html или JavaScript кода.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

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

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен