0

Bom dia caros, após pesquisar bastante, "percebi" o quanto o jquery é prático, porem me deparei com um obstáculo. Como ficaria o script abaixo no formato jquery?

function enableQuantity(prod,quantity)
{

if(document.getElementById(prod).checked)
document.getElementById(quantity).disabled = false;          
else
document.getElementById(quantity).disabled = true;
document.getElementById(quantity).selectedIndex = 0;
document.getElementById('subtotal1').value = 0;
document.getElementById('subtotal2').value = 0;
document.getElementById('subtotal3').value = 0;
document.getElementById(quantity).value = total;
calculateTotal();		
}
function calculateTotal()
{
var products = new Array("Product10","Product20","Product30");
var i=0;
var total = 0;
var subtotal = 0;
for(i;i<products.length;i++)
	if(document.getElementById(products[i]).checked)
	{
		total  = total + parseInt(document.getElementById(products[i]).value) * parseInt(document.getElementById('QuantityProd'+(i+1)).value);
		
		subtotal1  = parseInt(document.getElementById('Product10').value) * parseInt(document.getElementById('QuantityProd1').value);
		subtotal2  = parseInt(document.getElementById('Product20').value) * parseInt(document.getElementById('QuantityProd2').value);
		subtotal3  = parseInt(document.getElementById('Product30').value) * parseInt(document.getElementById('QuantityProd3').value);

	}
	
document.getElementById('subtotal1').innerHTML = subtotal1;
document.getElementById('subtotal2').innerHTML = subtotal2;
document.getElementById('subtotal3').innerHTML = subtotal3;
document.getElementById('Total').value = total;

}
window.addEvent('domready', function() {
enableQuantity('Product10','QuantityProd1');
enableQuantity('Product20','QuantityProd2');
enableQuantity('Product30','QuantityProd3');
});
<div>
<label>Marca se Quero o Produto 1 (R$25)</label>
<input type="checkbox" value="25" id="Product10" onclick="enableQuantity('Product10','QuantityProd1');">
/
<label>Quantidade</label>
<select id="QuantityProd1" onchange="calculateTotal();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<span>/ Exibe Subtotal no span = R$<span id="subtotal1">0</span></span></div>

<label>Marca se Quero o Produto 2 (R$35)</label>
<input type="checkbox" value="35" id="Product20" onclick="enableQuantity('Product20','QuantityProd2');">
/
<label>Quantidade</label>
<select id="QuantityProd2" onchange="calculateTotal();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<span>/ Exibe Subtotal no span = R$<span id="subtotal2"></span></span>
</div>

<div>
<label>Marca se Quero o Produto 3 (R$45)</label>
<input type="checkbox" value="45" id="Product30" onclick="enableQuantity('Product30','QuantityProd3');">
/
<label>Quantidade</label>
<select id="QuantityProd3" onchange="calculateTotal();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<span>/ Exibe Subtotal no span = R$<span id="subtotal3"></span></span>
</div>

<br>
<span>(essa div oculta se o produto1 não for selecionado)</span>
<div id="produto1_linha">
<span id="nome_produto1">Produto 1</span> /
<span id="quantidade_produto1"> {exibe quantidade selecionada}</span> /
<span id="subtotal_produto1"> {exibe subtotal}</span>
</div>
<br>

<span>(essa div oculta se o produto2 não for selecionado)</span>
<div id="produto2_linha">
<span id="nome_produto2">Produto 2</span> /
<span id="quantidade_produto2"> {exibe quantidade selecionada}</span> /
<span id="subtotal_produto2"> {exibe subtotal}</span>
</div>
<br>

<span>(essa div oculta se o produto3 não for selecionado)</span>
<div id="produto3_linha">
<span id="nome_produto3">Produto 3</span> /
<span id="quantidade_produto3"> {exibe quantidade selecionada}</span> /
<span id="subtotal_produto3"> {exibe subtotal}</span>
</div>
<br>
<div>
<label>Total</label>
<input type="text" value="0" id="Total" size="20">
</div>

Esse JS é para uso em um plugin Joomla, por isso fiz um HTML aqui rapidinho para visualização mas contem vários erros. Basicamente é uma calculadora. Desde já, obrigado

4
  • 2
    O live code do seu exemplo não está funcionando aqui para mim.
    – Jhonathan
    17/02/2016 às 11:07
  • 2
    Coloque seu HTML e arrume seu snippet por favor. Talvez dê até pra melhorar a sua lógica.
    – Marconi
    17/02/2016 às 11:10
  • Obrigado pelo pronto retorno, montando o html de exemplo agora para exemplo. 17/02/2016 às 11:43
  • @DaniloFagundes, uma dica com JavaScript, evite fazer buscas por elementos DOM de forma desnecessárias, $('#id') e document.getElementById('id') são funções que envolvem um custo... então faça elas apenas uma vez, armazene em uma variável, então utilize esta variável no seu código. 17/02/2016 às 14:43

2 Respostas 2

4

Danilo, primeiro que me reservo ao direito de discordar que jQuery é mais pratico que JavaScript, se levamos em conta apenas os browsers modernos e excluindo a depedencia que alguns frameworks tem com o jQuery, só vejo vantagens em não utiliza-lo.

$(function() {
  var total = $("#Total");
  var produtos = [$("#Product10"), $("#Product20"), $("#Product30")];
  var quantidades = [$("#QuantityProd1"), $("#QuantityProd2"), $("#QuantityProd3")];
  var subTotais = [$("#subtotal1"), $("#subtotal2"), $("#subtotal3")];

  function enableQuantity(produto, quantidade)
  {
    quantidade.prop("disabled", !produto.prop("checked"));
    quantidade.val('');
    calculateTotal();       
  }

  function calculateTotal()
  {
    var soma = 0;
    var subTotal = 0;
    for (var indice = 0; indice < 3; indice++) {
      if (produtos[indice].prop("checked")) {
        subTotal = parseInt(produtos[indice].val()) * parseInt(quantidade[indice].val());
        subTotais[indice].value = subTotal;
        soma += subTotal;
      }
    }
    total.val(soma);
  }

  for (var indice = 0; indice < 3; indice++) {
    enableQuantity(produtos[indice], quantidades[indice]);
  }
});

No codigo acima, já realizei algumas melhorias que achei pertinente, porém é possivel melhorar um pouco mais:

$(function() {
  var total = $("#Total");
  var produtos = [$("#Product10"), $("#Product20"), $("#Product30")];
  var quantidades = [$("#QuantityProd1"), $("#QuantityProd2"), $("#QuantityProd3")];
  var subTotais = [$("#subtotal1"), $("#subtotal2"), $("#subtotal3")];
  var subTotal = 0;
  var soma = 0;

  for (var indice = 0; indice < 3; indice++) {
    quantidade.prop("disabled", !produto.prop("checked"));
    quantidade.val('');
    if (produtos[indice].prop("checked")) {
      subTotal = parseInt(produtos[indice].val()) * parseInt(quantidade[indice].val());
      subTotais[indice].value = subTotal;
      soma += subTotal;
    }
  }
  total.val(soma);
});

mas veja, o que tornou o codigo aqui mais compacto, não foi a escolha pelo jQuery, mas algumas decisões, agora vejamos o mesmo codigo usando sem jQuery:

document.addEventListener("readystatechange", function (event) {
  if (document.readyState == "interactive") {
    var sel = function sel(id) { 
      return document.getElementById(id);
    }
    var total = sel("Total");
    var produtos = [sel("Product10"), sel("Product20"), sel("Product30")];
    var quantidades = [sel("QuantityProd1"), sel("QuantityProd2"), sel("QuantityProd3")];
    var subTotais = [sel("subtotal1"), sel("subtotal2"), sel("subtotal3")];    
    var subTotal = 0;
    var soma = 0;

    for (var indice = 0; indice < 3; indice++) {
      quantidade.disabled = !produto.checked";
      quantidade.selectedIndex = 0;
      if (produtos[indice].checked) {
        subTotal = parseInt(produtos[indice].value) * parseInt(quantidade[indice].value);
        subTotais[indice].value = subTotal;
        soma += subTotal;
      }
    }
    total.value = soma;
  }  
});
6
  • Boa tarde amigo, obrigado pela pronta resposta. Atualizei com um exemplo de HTML do que na prática deve ser o resultado, vi que tem erros.Sobre a questão do JQuery, involuntariamente foi um comentário de alguém(eu ;) ) que ficou impressionado com alguns exemplos práticos com tão pouco código, mas essa ideia é totalmente reversível, coisa de iniciante. 17/02/2016 às 14:42
  • @DaniloFagundes, não nego a importância do jQuery, ele trouxe uma "padronização" entre os browsers, uma forma mais flexível de buscar elementos na pagina e uma serie de métodos que ajudavam na hora de manipular o conteúdo... porém os browsers evoluiram, hoje já existe uma certa "padronização", o foi adicionado os métodos querySelector e querySelectorAll, foi disponibilizado o prototype, e muitos objetos ganharam métodos novos através dele, como por exemplo forEach, map, reduce, filter para os Arrays. 17/02/2016 às 14:48
  • @DaniloFagundes, uma dica quanto estiver usando o Snippet para escrever o seu exemplo de codigo... selecione tudo (Ctrl + A) então use Shift + Tab... isto vai indetar o seu HTML, JavaScript ou CSS. 17/02/2016 às 14:51
  • 2
    +1 pela primeira frase e pelo trabalho em converter todo o código, -jQuery, +VanillaJS. 17/02/2016 às 14:59
  • @DaniloFagundes, atualizei os códigos da minha resposta tendo em vista o seu script atualizado. 17/02/2016 às 15:01
2

A vantagem do uso de framework como JQuery é reuso de funções e compatibilidade cross-browser.

Note que muitos confundem Jquery como se fosse uma linguagem distinta do JavaScript. O JQuey é um framework escrito em JavaScript.

Contudo, esse não é o foco da questão, portanto, vamos a resposta.

No script que postou, a conversão para funções do JQuery é simples. Abaixo, exemplos do que precisa ser convertido. Uma lista de locais óbvios onde consegui identificar numa visão superficial.

Me abstenho em reescrever o script inteiro pois isso é o seu trabalho. O máximo que posso lhe prover são orientações sobre o que fazer.

Método getElementById()

Onde você tem: document.getElementById, com JQuery ficaria como $().

Exemplo:

document.getElementById('id_do_elemento')

Modifique para

$('#id_do_elemento')

Note que é o caracter sharp #, o qual diz ao JQuery que se trata do atributo ID.

Evento domready

O trecho window.addEvent('domready', function() {, basta trocar para

$().ready(function() {

Método innerHTML

Onde tem .innerHTML = 'bla bla';. troque por

.html('bla bla');

Exemplo: $('#id_do_elemento').html('bla bla');

Atributo checked

if(document.getElementById(products[i]).checked)

Ficaria assim: if($('#'+products[i]+':checked').val())

Atributo value

Onde tem .value = 'bla bla';. troque por

.val('bla bla');

Exemplo: $('#id_do_elemento').val('bla bla');

Atributo disabled

Onde tem .disabled = false;. troque por

.prop('disabled', false);

Exemplo: $('#id_do_elemento').prop('disabled', false);

Atributo selectedIndex

Onde tem .selectedIndex = 0;. troque por

.prop('selectedIndex', 0);

Exemplo: $('#id_do_elemento').prop('selectedIndex', 0);

2
  • @renan quando for assim você mesmo pode editar.
    – Syzoth
    17/02/2016 às 15:08
  • Obrigado @Daniel, seguindo essas valiosas dicas vou tentar converter outro código aqui para efeito de aprendizagem. 17/02/2016 às 17:09

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 .