iterate array with element id to show / hide

Question

iterate array with element id to show / hide

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have several arrays that hide or display fields based on the change event of a select, the problem is that by iterating the array with the id of the elements only the last value of the array is displayed, as if the instruction inside the loop was rewritten and not applied to each item, code:

$('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>

In this case only #link would be visible, how can I fix this?

javascript jquery

asked by anonymous 30.01.2018 / 04:41

2 answers

0

A different logic, but it works:

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();
        });
    }

31.01.2018 / 11:32

Error javax.naming.NoInitialContextException - console application How to declare a cursor type variable in PL-SQL?

score 1 · Accepted Answer

The problem lies in your logic in the .each loop:

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

This iteration will always be visible in the last element of the array, because you are hiding all and showing only the item at a time.

What you would have to do is hide all before and in the loop show only the items in the array, putting the first line of the loop before the loop:

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