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

Question

[Виктор Уманский]

Всем здрасте, пишу правду плохо знаю js, поэтому и обращаюсь спецам!

В карточке товара есть количество товара, верстку я пихнул скрипт увеличение и уменьшение, есть общая количество товара допустим 4, как правильно до писать в код js что бы, когда пользователь пытается увеличить больше 4, что бы оно не увеличивалось.

Извините если плохо описал свою проблему!

html

<div class="number">
     <span class="minus"><?= Html::img('/web/images/minus.png', ['alt' => '']) ?></span>
     <input type="text" value="1" size="5"/>
     <span class="plus"><?= Html::img('/web/images/plus.png', ['alt' => '']) ?></span>
</div>

сам скрипт

$(document).ready(function() {
            $('.minus').click(function () {
                var $input = $(this).parent().find('input');
                var count = parseInt($input.val()) - 1;
                count = count < 1 ? 1 : count;
                $input.val(count);
                $input.change();
                return false;
            });
            $('.plus').click(function () {
                var $input = $(this).parent().find('input');
                $input.val(parseInt($input.val()) + 1);
                $input.change();
                return false;
            });
        });

Answer 1

[Александр Гамов]

Введи дополнительные опции min и max и проверку на соответствие, если проверка не пройдена - return false.

increment () {
      if ((this.value + 1) > max) {
        return;
      }
      this.value += 1
    }

Comments

[Виктор Уманский]

помогите с кодом, я еще очень слаб в js, буду признателен

[Виктор Уманский]

извините за глупый вопрос, в каком месте его вставить или как правильно его ставить?

[Александр Гамов]

<input type="text" value="1" data-max="10" size="5"/>

$('.plus').click(function () {
                var $input = $(this).parent().find('input');
                var max = $input.attr("data-max");
                var count = parseInt($input.val());
                if( count + 1  <= max ){
                     count += 1;
                    $input.val(count);
                    $input.change();
                } 
                return false;
            });

[Александр Гамов]

Виктор Уманский, В самом первом комменте я просто привел пример как это у меня в одном месте реализовано. Чуть выше показал для вашего примера. С минимум и вычитанием думаю сами разберетесь ;-)

Answer 2

[Павел Корнилов]

$(document).ready(function() {
		
            $('.minus').click(function () {
              var $input = $(this).parent().find('input');
                var count = parseInt($input.val()) - 1;
                count = count < 1 ? 1 : count;
                $input.val(count);
                $input.change();
                return false;
            });
            $('.plus').click(function () {
              var $input = $(this).parent().find('input');
				var count = parseInt($input.val()) + 1;
				count = count > 4 ? 4 : count;
                $input.val(count);
                $input.change();
                return false;
            });
        });

https://codepen.io/anon/pen/KvjrXw?editors=1111

Comments

[Виктор Уманский]

Привет, кнопка плюс не увеличивает(

[Павел Корнилов]

UPD.

Answer 3

[Exploding]

Зачем тебе js... Это не нужно. Просто пиши:

<input type="number" value="1" size="5" min="1" max="4" step="1" required>

Этот элемент поддерживает и дробные числа.
А от js толку ноль.
Всеравно ведь нкжно будет проводить проверку на php перед постом в бд...

Comments

[Александр Гамов]

type="number" не всегда подходит.

[Exploding]

Александр Гамов, почему?

[Александр Гамов]

Exploding, потому что он добавляет свои дебильные + - которые хрен нормально стилизуешь и которые каждый браузер по своему рисует.
Ну и если нужно вывести несколько вариантов +1 +5 +10, без js никуда.

[Exploding]

Александр Гамов, ну вроде бы ж они у меня просто убирались через css да и всё. А +2, +5, +10 так это ж параметр step отвечает (в переводе с заморского "шагом" зовётся)

[Александр Гамов]

Exploding, Я имел ввиду несколько кнопок с разными вариантами.