JS Events - for loop

问题

I'm creating a website database which will have roughly 80-100 cards of individual products in each one. Inside the cards there is a + and - button which changes an input element. I have the counter code working fine but I need the buttons to be changing the input box in the card that is being pressed. Is there any way to focus the click event so that it changes the input element inside it's div? Should I be approaching this differently...

This is the complete card 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;
    } );}
    

回答1:

I ended up using Jquery as it has the $(this) input which will help with the 100 or so cards with identical class names

 $(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++
});
});

来源：https://stackoverflow.com/questions/65292530/js-events-for-loop