主页 / 问题 / 1008151
Accepted
Максим Сиваконь
Asked:2020-07-30 14:40:16 +0000 UTC2020-07-30 14:40:16 +0000 UTC

如何从特定输入中获取数字

  • 772

我有一个目录，在目录中有一个按钮，在按钮中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>
jquery

1 个回答

  1. Best Answer

    可以通过根据点击获得所需元素来组织此业务$(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>

    Ps 你也可以搜索parent(), children(), next(), prev(), closest(), find(). 对元素导航有很大帮助）

    '纯' JS 中的 Ps-2 翻译，没那么长：

    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>

    • 2

相关问题