Как взять число у определенного input

05 мая 2021, 02:50

У меня есть каталог, в каталоге есть кнопка , в кнопке есть input и две кнопки которые увеличивают значения и уменьшают значение в input. Но input ов может быть много! И я решил их отследить по date-item. Тоесть при клике на кнопку (+ или -) я получаю date-item. И теперь я получаю число с input у которого тоже date-item.

$(".inc").click(function () { // тут я обрабатываю клик
    date_item = $(this).attr('date-item'); // узнаю какое число в date-item
    valueProductCount = $('input.fieldCount').val();//тут я получаю число с input
    alert(valueProductCount);//вывожу
});

поначалу хотел так сделать на получение числа с input

valueProductCount = $('input.fieldCount').eq(date_items).val();

но я не получаю требуемое число!

Как можно получить число? Или как можно обойтись без date-item - а точнее как определять какой по счёту класс в массиве чтобы потом к нему обращаться!

<div class="myBlockByPLT">
  <button type="button" class="but counterBut dec" date-item="1">-</button>
  <input type="text" class="field fieldCount" date-item="1" value="1" data-min="1" data-max="11">
  <button type="button" class="but counterBut inc" date-item="1">+</button>
</div>

Answer 1

Это дело можно организовать, доставая нужный элемент в зависимости от кликнутой $(this)

.siblings() дает список всех элементов одинакового "уровня" с данным элементом. А если указать в нем конкретный класс - достанет нужный инпут. Покликайте:

$('.inc').on('click', function(){ 
  var x = $(this).siblings('.num').val(); 
  $(this).siblings('.num').val( ++x ); 
}); 
 
$('.dec').on('click', function(){ 
  var x = $(this).siblings('.num').val(); 
  x = (x > 1) ? (--x) : 0; // Ограничение на отрицательные числа, например 
  $(this).siblings('.num').val( x ); 
});

.block { margin: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block"> 
  <button class="dec">-</button> 
  <input class="num" value="0"> 
  <button class="inc">+</button> 
</div> 
<div class="block"> 
  <button class="dec">-</button> 
  <input class="num" value="0"> 
  <button class="inc">+</button> 
</div> 
<div class="block"> 
  <button class="dec">-</button> 
  <input class="num" value="0"> 
  <button class="inc">+</button> 
</div>

P.s. Еще можете поискать parent(), children(), next(), prev(), closest(), find(). Сильно помогают ориентироваться с элементами)

P.s.-2 Перевод в 'чистый' JS, не так уж и длинно:

var inc = document.querySelectorAll('.inc'); 
var dec = document.querySelectorAll('.dec'); 
 
for( var i = 0; i < inc.length; i++ ){ 
  // Там могло быть 2 цикла, но кол-во кнопок всегда одинаковое, можно напихать в один. 
  inc[i].addEventListener('click', function(){ 
    var num = this.parentNode.querySelector('.num'); // Без All - первый найденный 
    num.value = +num.value + 1;  
    // Плюсик перед num.value превращает его в число. val() делает это за нас.  
    // Без плюса, '0' + 1 станет 01 вместо 1. 
  }); 
	 
  dec[i].addEventListener('click', function(){ 
    var num = this.parentNode.querySelector('.num'); 
    num.value = (num.value > 1) ? (num.value - 1) : 0; 
  }); 
	 
}

.block { margin: 5px; }

<div class="block"> 
  <button class="dec">-</button> 
  <input class="num" value="0"> 
  <button class="inc">+</button> 
</div> 
<div class="block"> 
  <button class="dec">-</button> 
  <input class="num" value="0"> 
  <button class="inc">+</button> 
</div> 
<div class="block"> 
  <button class="dec">-</button> 
  <input class="num" value="0"> 
  <button class="inc">+</button> 
</div>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Браузер не может найти картинку, переданную в тег

передаю картинку из БД в шаблон, но браузер её почему-то не находитОбъясните пожалуйста почему и как это решить

HTML

Почему съезжает блок меню?

Меню состоит из двух блоков header__left и header__right, они должны находиться в одной линии, Но блок header_right съезжает внизКак можно это исправить?

160

HTML

Как связать checkbox и select

Есть элемент select, рядом с ним стоит чекбокс (<input type='checkbox'>) select по умолчанию находится в состоянии disabled, мне надо что бы при нажатии на чекбокс...

117

HTML

Внедрить share-кнопки социальных сетей?

Нужно внедрить возможность через сайт публикацию в соц сетяхПопробовал, к примеру, в вк следующее:

100