2

tenho a seguinte estrutura:

<div class="product-price">
R$ 140,00
</div>
<div class="product-price">
R$ 165,30
</div>
<div class="product-price">
R$ 12,55
</div>
<div class="product-price">
R$ 25,22
</div>

Entre outros valores que seguem a mesma estrutura. Porém, preciso preciso fazer uma função js para que se o valor do produto for menor que R$30, eu não poderei mostrar o número de parcelas para este produto. Se for maior que R$30, eu mostro o número de parcelas.

Minha estrutura js é esta:

function calculaParcelaHome(){
    var regex = /\d+,\d+/g;
    var texto = $(".product-price").text(); // pega o conteúdo da div Preco Avista no arquivo products.tpl
    var valor = regex.exec(texto); //converte a string para int
    var insereValor = parseFloat(valor.join("").replace(",",".")); // converte o valor para Float. 
    console.log(insereValor);

    if (insereValor >= 30) {
        $('.parcelas-produtos').css('display','block');
        console.log("Valor maior que 30");
    }else{
        $('.parcelas-produtos').css('display','none');
        console.log("Valor menor que 30");
    }
}

Só que na minha função, só consigo fazer a operação para a primeira Div, e não para as demais.

Esta é a estrutura das minhas parcelas:

<span class="parcelas-produtos">
                                {l s='3 x de'}
                                {if !$priceDisplay}{convertPrice price=$product.price /3}{else}{convertPrice price=$product.price_tax_exc}{/if}
                            </span>

Como poderia fazer esta lógica para as demais?

1
  • Olá Julio, onde são geradas essas parcelas? isso é feito no lado do servidor ou cliente?
    – Sergio
    25/11/2016 às 14:41

1 Resposta 1

1

Coloque seu código em um loop de elementos que você deseja, assim:

function calculaParcelaHome(){
  $('.product-price').each(function() {  
    var regex = /\d+,\d+/g;
    var texto = $(this).text(); // pega o conteúdo da div Preco Avista no arquivo products.tpl
    var valor = regex.exec(texto); //converte a string para int
    var insereValor = parseFloat(valor.join("").replace(",",".")); // converte o valor para Float. 
    console.log(insereValor);

    if (insereValor >= 30) {
        $(this).closest('div').find('.parcelas-produtos').show();
        console.log("Valor maior que 30");
    }else{
        $(this).closest('div').find('.parcelas-produtos').hide();
        console.log("Valor menor que 30");
    }
  });
}

calculaParcelaHome();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-price">
R$ 140,00
</div>
<div class="product-price">
R$ 165,30
</div>
<div class="product-price">
R$ 12,55
</div>
<div class="product-price">
R$ 25,22
</div>

8
  • Porém dessa forma ele está dando display none em todos os elementos que contêm a classe parcelas-produtos 25/11/2016 às 14:03
  • Tu quer exibir a parcela do lado do preço? É que o seu html não tava com a clase parcelas-produtos. Pode mandar a estrutura do parcelas-produtos? 25/11/2016 às 14:07
  • Só posso exibir a parcela do produto se o Valor do product-price for maior que R$30, entendeu? 25/11/2016 às 14:10
  • Sim, eu entendi, mas como está a sua estrutura do parcelas-produtos? 25/11/2016 às 14:10
  • Vou editar minha pergunta, olhe lá: 25/11/2016 às 14:11

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 .