2

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.

4
  • amigo, por exemplo café da manhã, vai o codigo, lanche vai o código para ele escolher o alimento, porém se clico no select do grupo de alimentos abre cada um em sua devia refeição, mas se clico para escolher o produto ele só carregar na primeira div, na segunda eu consigo fazer o select, mais ele so carrega a lista na primeira div. Aqui está um link de como está para você entender melhor. beltnutrition.com.br/blog/dieta/index.html Commented 24/11/2015 às 13:27
  • @jeannsebold não entendo o que este site faz. Commented 24/11/2015 às 14:25
  • @devgaspa ele faz o calculo do gasto calórico, na parte de Cálculo de ingestão de calorias, eu faço os lançamentos do alimentos, ai temos 7 refeições. Nela devemos lançar os alimentos consumidos clica-se no "Escolha um Grupo de Alimentos" ao clicar ele seleciona o grupo de alimentos que deseja, bom selecionou os alimentos do café da manhã, vamos para o alimentos do lanche, quando clico no select "Escolha um Grupo de Alimentos" do lanche, ele abre e se seleciono o grupo de alimento ele carrega o grupo no café manhã, eu quero cada alimentos sejam carregados em cada grupo da refeição. Commented 24/11/2015 às 14:39
  • Consegui identificar seu problema. Commented 24/11/2015 às 16:47

1 Resposta 1

2

Antes de tudo, isto está acontecendo porque você declarou vários atributos id com o mesmo valor, isso é altamente não recomendável, é uma má prática e irá causar muitos problemas futuros.

Para resolver isto, uma das alternativas existentes é:

Em cada chamada, exemplo, javascript:escolha('CEREAIS') você irá passar um parâmetro a mais indicando um identificar do grupo atual, por exemplo: javascript:escolha('CEREAIS', 1).

Também irá alterar os elementos <div> com id="escolha" para id="escolha1", lembrando que 1 é um identificador referente ao seu grupo.

Na função escolha(); você fará a seguinte alteração:

function escolha(item, idGrupo){
  {...}
  escolhido+='<div class="linha"><div class="item1"><a href="javascript:prato('+x+',\'null\', '+idGrupo+')">'+subprod[1]+'</a></div><div class="item2"><a href="javascript:prato('+x+',\'null\', '+idGrupo+')">'+subprod[2]+'</a></div><div class="item3"><a href="javascript:prato('+x+',\'null\', '+idGrupo+')">'+subprod[3]+'</a></div></div>';
  {...}
  this.document.getElementById('select').innerHTML=escolhido;
}

Assim você irá declarar para a função prato o identificador do grupo ao qual ela pertence.

Na função prato é quase a mesma coisa, você irá fazer estas alterações:

function prato(num,retira,idGrupo){
  {...}
  document.getElementById('escolha'+idGrupo).innerHTML=pratofeito;
  document.getElementById('totalcal').innerHTML=valocal;
}

Quando a função prato for chamada, no momento em que for fazer o innerHTML, o elemento que irá receber o pratofeito será o com id="escolha1"

Uma observação final é de que está forma não é a mais recomendada, existem formas melhores de se fazer isso, bem mais performáticas, consistentes e modulares. Acredito que muitas coisas em seu código possam ser melhoradas, sendo assim, se precisar de qualquer ajuda estaremos aqui.

7
  • Vlw Desvaga. Funcionou tudo blz, só que ao selecionar os alimentos de cada refeição ele da um bug. Quando eu adiciono o elementos no café da manhã, ele adiciona tranquilo, mais quando vou para o lanche e adiciono outro alimento ele adiciona os alimentos do café da manhã mais o alimento selecionado no lanche. Commented 25/11/2015 às 17:22
  • @jeannsebold Estou analisando... Commented 25/11/2015 às 17:41
  • @jeannsebold vamos para um chat para que eu possa te ajudar melhor, chat.stackexchange.com/rooms/32118/devgaspa-ajuda-voce Commented 25/11/2015 às 17:59
  • blz cara.. estou indo para la, mais eu ano consigo digitar nada Commented 25/11/2015 às 18:14
  • cara nao consigo conversar contigo nao da pra digitar mensagem Commented 25/11/2015 às 18:19

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 .