How to retrieve the value separately from input numbers with the same class

0

Well, I'm having a little problem in getting the value entered in the input number of some cards I created ... Basically, it is repeating the value on all inputs of all cards

Allinputsareinthesameclass,andeverytimeIclicktheaddbuttonortypeavalue,itchangesinallofthem.

Hereisthedivscodewiththe

<divclass="tab-content produtos">
                        <div class="tab-pane fade show active" role="tabpanel" id="tab-2">
                            <div class="card-group d-inline-flex align-items-center  flex-wrap">
                                <div class="card flex-wrap item-cardapio produto">
                                    <div class="card-body d-flex flex-column align-items-center">
                                        <img class="img-fluid imagem-produto" src="assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg">
                                        <h4 class="card-title titulo-produto">Title</h4>
                                        <h5 class="preco-produto">R$0,00</h5>
                                        <p class="card-text descricao-produto">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
                                        <div class="d-flex flex-column quantidade-produto"><span class="m-auto">Quantidade</span>
                                            <div class="m-auto quantidade">
                                                <button class="btn btn-danger qtd-botoes qtd-remove" type="button">-</button>
                                                <input type="number" value="0" min="0" class="qtd-produto">
                                                <button class="btn btn-danger qtd-botoes qtd-add" type="button">+</button></div>
                                        </div>
                                        <button class="btn btn-outline-danger btn-block btn-adicionar-carrinho" type="button">Adicionar ao Carrinho</button></div>
                                </div>
                                <div class="card flex-wrap item-cardapio">
                                    <div class="card-body d-flex flex-column align-items-center"><img class="img-fluid imagens-cardapio" src="assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg">
                                        <h4 class="card-title">Title</h4>
                                        <h5>R$0,00</h5>
                                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
                                        <div class="d-flex flex-column"><span class="m-auto">Quantidade</span>
                                            <div class="m-auto quantidade"><button class="btn btn-danger qtd-botoes qtd-remove" type="button">-</button><input type="number" value="0" min="0" class="qtd-produto"><button class="btn btn-danger qtd-botoes qtd-add" type="button">+</button></div>
                                        </div><button class="btn btn-outline-danger btn-block btn-adicionar-carrinho" type="button">Adicionar ao Carrinho</button></div>
                                </div>
                                <div class="card flex-wrap item-cardapio">
                                    <div class="card-body d-flex flex-column align-items-center"><img class="img-fluid imagens-cardapio" src="assets/img/aea6de9cbaee9d2704dcf81f4a194991-754x394.jpg">
                                        <h4 class="card-title">Title</h4>
                                        <h5>R$0,00</h5>
                                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
                                        <div class="d-flex flex-column"><span class="m-auto">Quantidade</span>
                                            <div class="m-auto quantidade"><button class="btn btn-danger qtd-botoes qtd-remove" type="button">-</button><input type="number" value="0" min="0" class="qtd-produto"><button class="btn btn-danger qtd-botoes qtd-add" type="button">+</button></div>
                                        </div><button class="btn btn-outline-danger btn-block btn-adicionar-carrinho" type="button">Adicionar ao Carrinho</button></div>
                                </div>
                            </div>
                        </div>
                    </div>

And here is the JavaScript code I created to increment / decrement the value of the input number every time I click the +/- buttons

var qtdAdd = $(".qtd-add");
var qtdRemove = $(".qtd-remove");
var produto = $(".qtd-produto");

qtdAdd.click(adicionaQtd);
qtdRemove.click(removeQtd);
function adicionaQtd(){
  var qtd = parseInt(produto.val());
  qtdAdiciona = qtd + 1;
  $(".qtd-produto").val(qtdAdiciona);

}
function removeQtd(){
  var qtd = parseInt(produto.val());
  if(qtd == 0){
      return false;
  }else{
      qtdRemove = qtd - 1;
      $(".qtd-produto").val(qtdRemove);
  }   
}
    
asked by anonymous 04.06.2018 / 23:42

1 answer

0

In JavaScript you need to save the object / element clicked using $(this) and send it to the function.

Then use el.closest() to go up 1 level of the clicked element and get to div.quantidade , then use find() to find the input within that div .

Follow the demo on JSFiddle:

link

    
05.06.2018 / 00:29