0

Bem é o seguinte. Tenho a seguinte estrutura de código:

Um div chamada part-sec que traz todo o conteúdo do produto. A div preco-produto vem com o preço. Até aí tudo bem. Mas embaixo eu tenho outra div com os tamanhos e quando a pessoa clica no tamanho ele tem que mudar a div preco-produto com o preço do tamanho que a pessoa clicou. Mas o problema é que tem várias divs iguais a esta e se eu clicar ele muda o preço do tamanho clicado em todas as divs. Eu queria que ele mudasse o preço somente do produto com a div clicada. Já tentei com this e não deu certo!

pequeno médio grande

2
  • 2
    Olá Felipe, você poderia editar sua pergunta acrescentando um pouco de código para que fique mais claro o problema? Commented 13/07/2017 às 15:21
  • 1
    Para entender melhor, leia o guia que explica o que é um Exemplo Mínimo, Completo e Verificável.
    – Woss
    Commented 13/07/2017 às 15:25

2 Respostas 2

1

fala Felipe,

você está dando a ordem para mudar todas as divs com a classe "precoproduto". Para resolver seu problema, pode fazer o seguinte:

$(document).on("click",".tam-selecionado",function(e) { 
    e.preventDefault();
    //separamos o elemento do click
    var elemento = $(this);
    .
    .
    .
    .

    elemento.closest('.part-info').find('.precoproduto').html(precoproduto);

basicamente separamos o elemento do clique; através dele procuramos a div pai mais próxima com a classe 'part-info'; vamos até a classe 'precoproduto' e alteramos o valor

2
  • Ok muito obrigado. Me ajudou muito; Commented 13/07/2017 às 20:42
  • @FelipeMichaeldaFonseca caso esteja tudo certo, marque a resposta como correta para ajudarmos mais pessoas. Commented 13/07/2017 às 23:53
0

Código html da página Imagem dos produtos com o preço igual em todos, quando clicado no tamanho

Quando passar o mouse no tipo de Item (pequeno, médio, grande), seleciona o grande; e ele muda no X-SALADA e no X-TUDO o preço, ou seja o preço fica igual. No entanto ele deveria somente mudar o preço no X-SALADA, não no X-TUDO. Segue o código:

$(document).on("click",".tam-selecionado",function(e) { e.preventDefault();

    var tamanhoSelecionado = $(this).text();
    var idcategoria = $(this).attr("data-id");
    var idproduto =  $(this).attr("data-produto-id");
    var precoproduto = "";

    $.ajax({
      url: 'http://teste/store/produtos?filter[categoria_id]=' + idcategoria,
      method: 'GET',
      success: function(retorno)
      {

        retorno.data.forEach(function(item)
        {
          var idprodutoselecionado = item.produto_id;

          if (idprodutoselecionado == idproduto)
          {

            item.tamanho.forEach(function(tamanho)
            {

              tamanhoProdutoArray = tamanho.tamanho.nome;

              if (tamanhoProdutoArray == tamanhoSelecionado)
              {
                precoproduto = tamanho.valor;
                **$(".precoproduto class-id" + idproduto  + "").empty();
                $(".precoproduto").html(precoproduto);**
              }

            })
          }

        })
      },
      error: function(XMLHttpRequest, textStatus, errorThrown)
      {
        alert("Status do Servidor: " + textStatus);
        alert("Erro do Servidor: " + errorThrown);
      }

    });
  });
});

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 .