How do you get another div with the same name without changing the others?

Asked

Viewed 137 times

0

Well here’s the thing. I have the following code structure:

A div called part-sec that brings all the content of the product. The div-price-product comes with the price. So far so good. But underneath I have another div with the sizes and when the person clicks on the size he has to change the price-product div with the price of the size that the person clicked. But the problem is that it has several Divs equal to this and if I click it changes the price of the size clicked on all Divs. I wanted him to change the price only of the product with the div clicked. I’ve tried this and it didn’t work!

small medium great

javascript jquery json
  • 2

    Hello Felipe, you could edit your question by adding a little code to make it clear the problem?

  • 1

    To better understand, read the guide that explains what a [mcve is].

2 answers

1


speech Felipe,

you are giving the order to change all Divs with the "precoproduct" class. To solve your problem, you can do the following:

$(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);

basically we separate the click element; through it we look for the nearest parent div with the class 'part-info'; we go to the class 'precoproduct' and change the value

  • OK thank you very much. It helped me a lot;

  • @Felipemichaeldafonseca if everything is right, mark the answer as correct to help more people.

0

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

When you mouse the Item type (small, medium, large), you select the big one; and it changes in X-SALAD and X-ALL the price, that is, the price is equal. However he should only change the price on X-SALAD, not X-ALL. Follow the code:

$(Document). on("click",".tam-selected",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);
      }

    });
  });
});

Browser other questions tagged javascript jquery json

You are not signed in. Login or sign up in order to post.