JS事件- for循环

Question

我正在创建一个网站数据库，这将有大约80-100在每个单独的产品卡。在卡片内部有一个+和-按钮，用于更改输入元素。我有计数器代码工作正常，但我需要的按钮，以改变输入框中的卡是按下的。有没有办法聚焦click事件，让它改变div中的输入元素？我应该用不同的方式来处理这件事吗？

这是完整的卡片HTML：

<div class="card 688AttackSub">
      <img src="688%20attach%20sub.jpg" alt="688 Attack Sub">
<div class="info-container">
      <p>688 Attack Sub</p>
      <p>1995</p>
<div class="no-sold">
      <p>Number Sold</p>
<div class="buttons">
      <button class="btn btn-outline-secondary btn-minus"><i class="fa fa-minus"></i></button>
   <input class="form-control counter" min="0" name="quantity" value="1" type="number">
     <button class="btn btn-outline-secondary btn-plus"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="sold-price">
     <p>Total Sold Price</p> 
<div class="buttons">
     <button class="btn btn-outline-secondary btn-neg"><i class="fa fa-minus"></i></button>
     <input class="form-control quantity counter-price" min="0" name="quantity" value="1" type="number">
<button class="btn btn-outline-secondary btn-add"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="av-price">
   <p>Average Price</p><input class="form-control quantity avPrice" min="0" name="quantity" value="1" type="number">
</div>
<div class="last-sold">
   <p>Last Sold Date</p><input class="form-control quantity lastSoldDate" min="0" name="quantity" value="1" type="number">
  <p>Last Sold Price</p><input class="form-control quantity lastSoldPrice" min="0" name="quantity" value="1" type="number">
</div>
</div>
</div>

var buttonRed = document.querySelectorAll(".btn-minus");
var buttonPos = document.querySelectorAll(".btn-plus");
var buttonNeg = document.querySelectorAll(".btn-neg");
var buttonAdd = document.querySelectorAll(".btn-add");
var counter = document.querySelectorAll(".counter");
var counterPrice = document.querySelectorAll(".counter-price");
var averagePrice = document.querySelectorAll(".avPrice");
var lastSoldDate = document.querySelectorAll(".lastSoldDate");
var lastSoldPrice = document.querySelectorAll(".lastSoldPrice");


for (var i = 0; i < buttonRed.length; i++){
    buttonRed[i].addEventListener("click", function() {
        for (var m = 0; m < counter.length; m++){
    counter[m].value = parseInt(counter[m].value) - 1;
} false;
    } );}

for (var j = 0; j < buttonPos.length; j++){
    buttonPos[j].addEventListener("click", function() {
        for (var m = 0; m < counter.length; m++){
    counter[m].value = parseInt(counter[m].value) + 1;
} false;
    } );}

for (var k = 0; k < buttonNeg.length; k++){
    buttonNeg[k].addEventListener("click", function() {
        for (var n = 0; n < counterPrice.length; n++){
    counterPrice[n].value = parseInt(counterPrice[n].value) - 1;
} false;
    } );}

for (var l = 0; l < buttonAdd.length; l++){
    buttonAdd[l].addEventListener("click", function() {
        for (var n = 0; n < counterPrice.length; n++){
    counterPrice[n].value = parseInt(counterPrice[n].value) + 1;
} false;
    } );}

Answer 1

我最终使用了Jquery，因为它有$(this)输入，这将有助于处理大约100张具有相同类名的卡片

 $(document).ready(function() {
        $(".btn-minus").on('click', function(){
            $(this).siblings($('.counter')).get(0).value--
});
});

$(document).ready(function() {
        $(".btn-plus").on('click', function(){
            $(this).prev($('.counter')).get(0).value++
});
});

$(document).ready(function() {
        $(".btn-neg").on('click', function(){
            $(this).siblings($('.counter-price')).get(0).value--
});
});

$(document).ready(function() {
        $(".btn-add").on('click', function(){
            $(this).prev($('.counter-price')).get(0).value++
});
});