JS 事件 - for 循环

Question

我正在创建一个网站数据库，每个数据库中将包含大约 80-100 个单独产品的卡片。卡片内部有一个 + 和 - 按钮，用于更改输入元素。 我的计数器代码工作正常，但我需要按钮来更改正在按下的卡中的输入框。 有什么方法可以聚焦单击事件，以便它更改其 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++
});
});