2

possuo diversos arrays que escondem ou exibem campos baseados no evento change de um select, o problema é que ao iterar o array com o id dos elementos somente o último valor do array é exibido, como se a instrução dentro do loop fosse reescrita e não aplicada a cada item, código:

$('select[name="template"]').on('change', function() {
    var template_value = $(this).val();

    switch(template_value) {
        case 'template_1':
        var visible_fields_template = ['model', 'capacity', 'color', 'hour', 'link'];
        break;

        case 'template_2':
        var visible_fields_template = ['model', 'capacity', 'name', 'color', 'hour', 'link'];
        break;

    }

    $.each(visible_fields_template, function(index, value) {
        $('div.teste_fields:not([id="'+value+'"])').hide();
        $('div.teste_fields[id="'+value+'"]').show();
    });

    $('div.template:not([id="'+template+'"])').hide();
    $('div.template[id="'+template+'"]').show();
});

HTML:

    <form class="col-md-10">
  <fieldset>
    <div class="row">
      <div class="col-md-12 mb-20" id="template">
       <label for="template">Template *</label>
       <select class="form-control " name="template">
        <option value="template_1">Modelo 1</option>
        <option value="template_2">Modelo 2</option>
      </select>
    </div>
  </div>
  <div class="row teste_fields" id="model">
    <div class="col-md-12 mb-20">
     <label for="model">Modelo *</label>
     <select class="form-control " name="model">
      <option value="celular_1">celular 1</option>
      <option value="celular_2">celular 2</option>
    </select>
  </div>
</div>
<div class="row teste_fields" id="capacity">
  <div class="col-md-12 mb-20">
    <label for="capacity">Capacidade *</label>
    <select class="form-control " name="capacity">
      <option value="8GB">8GB</option>
      <option value="16GB">16GB</option>
    </select>
  </div>
</div>
<div class="row teste_fields" id="color">
  <div class="col-md-12 mb-20">
    <label for="color">Cor *</label>
    <select class="form-control " name="color">
     <option value="Silver">Silver</option>
     <option value="Space Gray">Space Gray</option>
   </select>
 </div>
</div>
<div class="row teste_fields" id="link">
  <div class="col-md-12 mb-20">
    <label for="link">Link *</label>
    <input name="link" placeholder="http:www.site.com" class="form-control" type="text">
  </div>          
</div><!--row1-->
<div class="row teste_fields" id="hour">
  <div class="col-md-12 mb-20">
    <label for="nome">Hora *</label>
    <input name="hour" class="form-control" type="text">
  </div>          
</div><!--row1-->
</fieldset> 
</form>

nesse caso somente o #link ficaria visível, como posso corrigir isso?

8
  • isso fica dentro do evento change(), não coloquei porque achei que não seria necessário 30/01/2018 às 4:27
  • na verdade toda a lógica já está feita, o problema é que dentro do loop ele só oculta/exibe o último elemento do array 30/01/2018 às 5:23
  • Mas isso é claro. O loop está ocultando todos menos o item da vez na array, e isso em cada um, quando chegar ao final, só último será visível.
    – Meu ovo
    30/01/2018 às 5:35
  • 1
    1ª iteração: todos invisíveis menos "model".... 2º iteração, todos invisíveis menos "capacity"... e assim vai
    – Meu ovo
    30/01/2018 às 5:37
  • Acrescenta na pergunta o que vc realmente deseja. Não está muito claro. Na pergunta vc diz "como posso corrigir isso?" mas não diz o que seria o correto.
    – Meu ovo
    30/01/2018 às 6:08

2 Respostas 2

1

O problema está em sua lógica no laço .each:

$.each(visible_fields_template, function(index, value) {
   $('div.teste_fields:not([id="'+value+'"])').hide(); // AQUI
   $('div.teste_fields[id="'+value+'"]').show();
});

Essa iteração vai resultar visível sempre no último elemento da array, porque você está escondendo todos e mostrando somente o item da vez.

O que teria que fazer é ocultar todos antes e no laço mostrar apenas os itens da array, colocando a primeira linha do laço antes do laço:

$('div.teste_fields').hide();
$.each(visible_fields_template, function(index, value) {
    $('div.teste_fields[id="'+value+'"]').show();
});
1
  • Lógica simples e eu nem tinha percebido, muito obrigado :) 31/01/2018 às 14:02
0

Uma lógica diferente, mas funciona:

var todos_campos = ['model', 'capacity', 'name', 'color', 'hour', 'link'];

    $('document').ready(function (){
        $('select[name="template"]').trigger('change');
    });

    $('select[name="template"]').on('change', function() {

        $.each(todos_campos, function(index, value) {
            $('div.teste_fields:not([id="'+value+'"])').hide();
        });

        var template_value = $(this).val();

        switch(template_value) {
            case 'template_1':
                mostrar_campos(['model', 'link']);
            break;

            case 'template_2':
                mostrar_campos(todos_campos);
            break;
        }
    });
    var mostrar_campos = function (campos_exibidos) {
        $.each(campos_exibidos, function(index, value) {
            $('div.teste_fields[id="'+value+'"]').show();
        });
    }

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 .