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?