2

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

<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="10" />
  <button class="increase" type="button">+</button>
</div>
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="20" />
  <button class="increase" type="button">+</button>
</div>
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="30" />
  <button class="increase" type="button">+</button>
</div>
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="40" />
  <button class="increase" type="button">+</button>
</div>

3 ответа 3

4

document.addEventListener('click', function (e) {
  if (e.target.classList.contains("increase")) {
    ++e.target.parentElement.querySelector("input").value;
  } else if (e.target.classList.contains("decrease")) {
    --e.target.parentElement.querySelector("input").value;
  }
})
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="10" />
  <button class="increase" type="button">+</button>
</div>
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="20" />
  <button class="increase" type="button">+</button>
</div>
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="30" />
  <button class="increase" type="button">+</button>
</div>
<div>
  <button class="decrease" type="button">-</button>
  <input type="text" name="field" value="40" />
  <button class="increase" type="button">+</button>
</div>

3
  • а если button-ы находятся еще в дополнительной обертке?
    – WVFFLIFE
    Commented 6 июл. 2018 в 11:51
  • всё, разобрался, спасибо большое)
    – WVFFLIFE
    Commented 6 июл. 2018 в 12:00
  • @WVFFLIFE, по идее, вот так: developer.mozilla.org/ru/docs/Web/API/Element/closest
    – Qwertiy
    Commented 6 июл. 2018 в 12:25
1

можно так:

Array.prototype.forEach.call(document.querySelectorAll('.decrease'), function (v) {
        v.addEventListener('click', dec);
    })

    Array.prototype.forEach.call(document.querySelectorAll('.increase'), function (v) {
        v.addEventListener('click', inc);
    })

    function dec() {
        var div = this.parentElement;
        var input = div.children.item(1)
        input.setAttribute('value', (parseInt(input.getAttribute('value')) - 1).toString());
    }

    function inc() {
        var div = this.parentElement;
        var input = div.children.item(1)
        input.setAttribute('value', (parseInt(input.getAttribute('value')) + 1).toString());
    }
<div>
    <button class="decrease" type="button">-</button>
    <input type="text" name="field" value="10"/>
    <button class="increase" type="button">+</button>
</div>
<div>
    <button class="decrease" type="button">-</button>
    <input type="text" name="field" value="20"/>
    <button class="increase" type="button">+</button>
</div>
<div>
    <button class="decrease" type="button">-</button>
    <input type="text" name="field" value="30"/>
    <button class="increase" type="button">+</button>
</div>
<div>
    <button class="decrease" type="button">-</button>
    <input type="text" name="field" value="40"/>
    <button class="increase" type="button">+</button>
</div>

0

что-нибудь такое подойдёт?

let increase = $('.increase');
increase.on('click', function(){
   $(this).prev().val(parseInt($(this).prev().val()) + 1);
})

let decrease = $('.decrease');
decrease.on('click', function(){
   $(this).next().val(parseInt($(this).next().val()) - 1);
})

https://jsfiddle.net/30oe85pf/8/

2
  • 1
    Не просили jquery.
    – Qwertiy
    Commented 6 июл. 2018 в 9:50
  • и это не работает.... Commented 22 авг. 2021 в 14:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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