JS Events - for loop

霸气de小男生 提交于 2021-02-11 12:54:26

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!