0

Bom dia, estou preso em uma questão no meu código onde tenho vários botões e inputs type "number" na mesma página e com o click do botão, adiciona x vezes (value do input) o produto específico no carrinho de compras.

<input type="number" class="quantidade" value="1" data-quantity="{{ product.id }}">
<input type="button" id="{{ product.id }}" value="Comprar"  onclick="addCart()">

Pensei em criar um atributo "data-quantity" no input com o id do produto que eu obtenho via twig e compara-lo com o id do botão que é o próprio id do produto. Porém, como faço essa verificação via JavaScript agora? Estou tentando assim.

function addCart(product_id){
    var botao = $('#{{ product.id }}');
    var entrada = $('.quantidade');

    if (botao.attr('id') == entrada.attr('data-quantity')) {
        var quantidade = entrada.val();
        console.log(quantidade); //Deve imprimir a quantidade do input referente ao botão apertado.

        // Aqui eu envio o valor da variável quantidade via ajax, o que não é problema depois que conseguir armazenar esse valor.
    }
}
1
  • Coloque na pergunta o HTML de onde estão o campo e o botão que dá pra fazer de um jeito bem melhor e mais simples.
    – Meu ovo
    21/01/2019 às 12:07

1 Resposta 1

2

No exemplo abaixo eu seleciono o input diretamente pelo data-quantity, repare que eu passo o evento para a função e a partir dele extraio o id do botão target.

https://api.jquery.com/attribute-equals-selector/

https://api.jquery.com/event.target/

function addCart(e){
    console.log(
      $('.quantidade[data-quantity="'+e.target.id+'"]').val()
    )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="quantidade" value="555" data-quantity="produto_1">
<input type="button" id="produto_1" value="Comprar"  onclick="addCart(event)">

EDIT:

Outra forma de fazer, é passar o id direto pra função ao invés do evento, o resultado é o mesmo:

function addCart(id){
    console.log(
      $('.quantidade[data-quantity="'+id+'"]').val()
    )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="quantidade" value="555" data-quantity="produto_1">
<input type="button" id="produto_1" value="Comprar"  onclick="addCart(this.id)">

2
  • Funcionou certinho aqui, mas não entendi o funcionamento do " passo o evento para a função e a partir dele extraio o id".
    – Rennan
    21/01/2019 às 13:10
  • 1
    a variável event que é passada carrega os dados do evento do click... Neste evento existe um atributo target que faz referencia ao botão que foi clicado. A partir desse target(que é o botão) eu capturo o id e uso ele no seletor. 21/01/2019 às 13:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .