0

Как можно сделать чтобы disabled(красная стрелочка) появлялась только если дошли до количество 1? Если количество больше чем 1 стрелочка черная? В js я не силен, спасибо.

https://jsfiddle.net/pa5u9L7h/32/

function formQuantity() {
    document.addEventListener("click", function (e) {
        let targetElement = e.target;
        if (targetElement.closest('.quantity__button')) {
            let value = parseInt(targetElement.closest('.quantity').querySelector('input').value);
            if (targetElement.classList.contains('quantity__button_plus')) {
                value++;
            } else {
                --value;
                if (value < 1) value = 1;
            }
            targetElement.closest('.quantity').querySelector('input').value = value;
        }
    });
}

formQuantity();
.quantity {
  width: 141px;
  height: 102px;
  display: flex;
  border-radius: 7px;
}

.quantity__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 53px;
  background: rgba(235, 236, 237, 0.21);
  padding: 25px 12px;
  justify-content: center;
}

.quantity__input {
  flex: 1 1 auto;
  outline: none;
}

.quantity__input input {
  height: 100%;
  font-weight: 700;
  font-size: 40px;
  line-height: math.div(47, 40);
  width: 100%;
  text-align: center;
  border-radius: 7px 0px 0px 7px;
  outline: none;
}

.quantity__button {
  position: relative;
  cursor: pointer;
  background: transparent;
}

.quantity__button_plus::before {
  content: '▲';
  font-size: 40px;
  color: #363c43;
  margin: 0px 0px 10px 0px;
}

.quantity__button_minus::after {
  content: '▲';
  color: #363c43;
  font-size: 40px;
}

.disabled::after {
  content: '▲';
  color: red;
  font-size: 40px;
}
<div class="quantity">
  <div class="quantity__input">
    <input autocomplete="off" type="text" name="form[]" value="1">
  </div>
  <div class="quantity__arrow">
    <button type="button" class="quantity__button quantity__button_plus"></button>
    <button type="button" class="quantity__button quantity__button_minus disabled"></button>
  </div>
</div>

1 ответ 1

2

Сказать честно, не особо заморачивался над решением, но смысл такой:

const targetBtn = document.querySelector(".quantity__button_minus")

function formQuantity() {
  document.addEventListener("click", function(e) {
    let targetElement = e.target;
    if (targetElement.closest('.quantity__button')) {
      let value = parseInt(targetElement.closest('.quantity').querySelector('input').value);
      if (targetElement.classList.contains('quantity__button_plus')) {
        value++;
      } else {
        --value;
        if (value <= 1) {
          value = 1;
        }
      }
      targetElement.closest('.quantity').querySelector('input').value = value;
    }
    if (parseInt(targetElement.closest('.quantity').querySelector('input').value) <= 1) {
      targetBtn.classList.add('disabled')
    } else {
      targetBtn.classList.remove('disabled')
    }
  });
}

formQuantity();
.quantity {
  width: 141px;
  height: 102px;
  display: flex;
  border-radius: 7px;
}

.quantity__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 53px;
  background: rgba(235, 236, 237, 0.21);
  padding: 25px 12px;
  justify-content: center;
}

.quantity__input {
  flex: 1 1 auto;
  outline: none;
}

.quantity__input input {
  height: 100%;
  font-weight: 700;
  font-size: 40px;
  line-height: math.div(47, 40);
  width: 100%;
  text-align: center;
  border-radius: 7px 0px 0px 7px;
  outline: none;
}

.quantity__button {
  position: relative;
  cursor: pointer;
  background: transparent;
}

.quantity__button_plus::before {
  content: '▲';
  font-size: 40px;
  color: #363c43;
  margin: 0px 0px 10px 0px;
}

.quantity__button_minus::after {
  content: '▼';
  color: #363c43;
  font-size: 40px;
}

.disabled::after {
  content: '▼';
  color: red;
  font-size: 40px;
}
<div class="quantity">
  <div class="quantity__input">
    <input autocomplete="off" type="text" name="form[]" value="1">
  </div>
  <div class="quantity__arrow">
    <button type="button" class="quantity__button quantity__button_plus"></button>
    <button type="button" class="quantity__button quantity__button_minus disabled"></button>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.