0

estou fazendo uma página de simulação de compras.

Já tenho o loop dos produtos em PHP, agora preciso fazer o cálculo de cada produto pela quantidade.

Aqui o HMTL:

<td width="140"><?= $produto_nome; ?></td>
<td width="160"><?= $produto_descricao; ?></td>
<td width="60"><?= $produto_tamanho; ?></td>
<td width="90">
    <input type="number" id="qtd" name="qtd" min="1" max="99" onChange="MudaLabel('total', this.value)">
    <a href="#">remover</a>
</td>
<td width="120"><span id="preco"><?= $produto_preco; ?></span></td>
<td width="90">
    <label id="total"></label>
</td>

Aqui o jQuery:

function MudaLabel(LabelID, value){
var Preco = $('#preco').text();

var Total = value * Preco;   //valor de exemplo
document.getElementById(LabelID).innerHTML = Total;

Agora pensem nisso como um looping. Como faço para cada tabela dessa ser cálculada individualmente.

Desse jeito que eu fiz, quando eu altero a quantidade de outros produtos muda apenas o valor do primeiro.

1 Resposta 1

2

Se você fizer isso da forma como está, todas as tags "span" ficarão com o mesmo ID, ou seja, "preco". O ID é algo que deve ser único em todo o seu HTML, pois ele representa um elemento específico.

Veja, a instrução dada ao sistema é para capturar o texto que está dentro do elemento com o ID "preco":

var Preco = $('#preco').text();

Porém no seu looping, todas as tags terão o ID "preco":

<span id="preco"><?= $produto_preco; ?></span>

Logo irá existir mais de um elemento com o ID "preco" e quando o sistema tenta obter esse elemento através do respectivo ID, é retornado o primeiro encontrado, por isso somente o primeiro é atualizado.

Para resolver o seu problema, é preciso que cada tag "span" tenha o seu próprio ID (vou partir do princípio que existe a variável "produto_id" no seu PHP):

<span id="preco_<?= $produto_id; ?>"><?= $produto_preco; ?></span>

É preciso que o seu campo "qtd" tenha um ID único também, assim como a label que recebe o total:

<input type="number" id="qtd_<?= $produto_id; ?>" name="qtd" min="1" max="99" onChange="MudaLabel(<?= $produto_id; ?>)">
<a href="#">remover</a>
//...
<label id="total_<?= $produto_id; ?>"></label>

Repare que cada elemento do HTML passa a ter um ID único composto por "_" seguido do ID do produto, logo não haverá nenhum elemento com o ID repetido.

Agora basta alterar a sua função JavaScript:

function MudaLabel(id){
    var qtd = $('#qtd_' + id).val()
    var Preco = $('#preco_' + id).text();

    var Total = qtd * Preco;   //valor de exemplo
    document.getElementById('total_' + id).innerHTML = Total;
    //...
}
1
  • Perfeito, Filipe! Era mais uma questão lógica mesmo, que eu não tinha pensado. Me salvou! Muito obrigado! 2/02/2016 às 11:56

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 .