Amigos bom dia.
Tenho o seguinte problema. Estou desenvolvendo um variável que contem uma lista de produtos.
var produtos = new Array()
produtos[produtos.length]="OUTROS|Catchup|1 sache|10"
produtos[produtos.length]="OUTROS|Mostarda|1 sache|15"
produtos[produtos.length]="OUTROS|Maionese|1 sache|40"
produtos[produtos.length]="OUTROS|Molho branco|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho bolonhesa|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho madeira|1 colh sopa|10"
produtos[produtos.length]="OUTROS|Molho agridoce|1 colh sopa|30"
produtos[produtos.length]="OUTROS|Molho rose|1 colh sopa|50"
produtos[produtos.length]="OUTROS|Catchup|1 sache|10"
produtos[produtos.length]="OUTROS|Pizza calabresa/frango catupiry e quatro queijos|1 fatia|400"
produtos[produtos.length]="OUTROS|Lasanha|2 colh sopa|160"
produtos[produtos.length]="OUTROS|Cachorro quente|1 unid|420"
produtos[produtos.length]="OUTROS|Misto quente|1 unid|235"
produtos[produtos.length]="OUTROS|Cheese burguer|1 unid|300"
produtos.sort();
function lstprodutos(){
var nomeprd="";
var recallprd="";
for (x=0;x<produtos.length;x++){
subprod=produtos[x].split('|');
if (recallprd!=subprod[0]){
nomeprd+='<div class="listprod"><a href="javascript:escolha(\''+subprod[0]+'\')">'+subprod[0]+'</a></div>';
recallprd=subprod[0];
}
}
document.getElementById('produtos').innerHTML=nomeprd;
document.getElementById('totalcal').innerHTML=0;
}
function escolha(item){
var escolhido='';
for (x=0;x<produtos.length;x++){
subprod=produtos[x].split('|');
if (item==subprod[0]){
escolhido+='<div class="linha"><div class="item1"><a href="javascript:prato('+x+',\'null\')">'+subprod[1]+'</a></div><div class="item2"><a href="javascript:prato('+x+',\'null\')">'+subprod[2]+'</a></div><div class="item3"><a href="javascript:prato('+x+',\'null\')">'+subprod[3]+'</a></div></div>';
}
}
this.document.getElementById('select').innerHTML=escolhido;
}
var item=new Array;
function prato(num,retira){
var pratofeito="";
var valocal=0;
if (!isNaN(num)){
elem = produtos[num];
item.push(elem);
}
if (!isNaN(retira)){
item.splice(retira,1)
}
for (i=0;i<item.length;i++){
substring=String(item[i]);
sub=substring.split('|');
pratofeito+='<div class="item4"><a href="javascript:prato(\'null\','+i+')" title="Clique para remover">'+sub[1]+', '+sub[2]+'</a></div>';
valocal=valocal+parseInt(sub[3]);
}
document.getElementById('escolha').innerHTML=pratofeito;
document.getElementById('totalcal').innerHTML=valocal;
}
Neste js, ele pega a categoria de produtos, quando clico ele abre a a lista de produtos, ao clicar ele carrega o valor de cada produto em cima, como se eu estivesse selecionando os produtos de uma refeição.
Que funciona conforme o código abaixo:
<div class="inputs_iden2">
<label class="txt_input">
<i class="fa fa-cutlery"></i>
Lanche
</label>
<br>
<div id="escolha"></div>
<br>
<div class="sel" id="sel" id="lanche">
<div class='txt'>ESCOLHA UM GRUPO DE ALIMENTOS</div>
<div class="options hide">
<div>
<a href="javascript:escolha('CEREAIS')">CEREAIS</a>
</div>
<div>
<a href="javascript:escolha('HORTALICAS')">HORTALIÇAS</a>
</div>
<div>
<a href="javascript:escolha('LEGUMINOSAS')">LEGUMINOSAS</a>
</div>
<div>
<a href="javascript:escolha('FRUTAS')">FRUTAS</a>
</div>
<div>
<a href="javascript:escolha('LEITE E DERIVADOS')">LEITE E DERIVADOS</a>
</div>
<div>
<a href="javascript:escolha('CARNE E OVOS')">CARNE E OVOS</a>
</div>
<div>
<a href="javascript:escolha('OLEOS E GORDURAS')">OLEOS E GORDURAS</a>
</div>
<div>
<a href="javascript:escolha('DOCES')">DOCES</a>
</div>
<div>
<a href="javascript:escolha('BEBIDAS')">BEBIDAS</a>
</div>
<div>
<a href="javascript:escolha('OUTROS')">OUTROS</a>
</div>
</div>
</div>
<div class="container clearfix">
<div id="HOTWordsTxt" style="display:block;clear:both;">
<div class="divider">
<div class="corpo">
<div align="left">
<p class="tit_list_ali" id="txt_H">Escolha um alimento</p>
<div class="linha" id="linha">
<div class="item1"><b>Alimento</b></div>
<div class="item2"><b>Quantidade</b></div>
<div class="item3"><b>Calorias</b></div>
</div>
<div id="select"></div>
<button class="btn_concluido" id="concluido">CONCLUIDO</button>
</div>
</div>
</div>
</div>
</div>
</div>
Porém eu preciso fazer isso para 10 refeições para que o usuário possa escolher os alimentos de cada refeição.
Eu já fiz funcionar o select para selecionar a lista de categoria de produtos, para que ele funcione o click só no elemento que estiver manipulando, porém quando clico na div de baixo que posso escolher a categoria de produto ele carrega só na primeira div. nunca carregar o produto no div do select que estou manipulando.
Sei que o Jquery tem o this que faz essa função.