iterate array with element id to display/hide

Asked

Viewed 442 times

2

I have several arrays that hide or display event-based fields change of a select, the problem is that when iterating the array with the element id only the last value of the array is displayed, as if the instruction within the loop were 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 that case only the #link would be visible, how can I fix this?

javascript jquery

  • this is inside the event change(), I did not put because I thought it would not be necessary

  • in fact all the logic is already done, the problem is that inside the loop it only hides/displays the last element of the array

  • But this is clear. The loop is hiding all but the time item in the array, and that in each, when it reaches the end, only the last will be visible.

  • 1

    1st iteration: all invisible except "model".... 2nd iteration, all invisible except "Capacity"... and so on

  • Add to the question what you really want. It’s not very clear. In the question you say "how can I fix this?" but it doesn’t say what would be right.

  • shows your html code

  • truth, dvd, this part was a little confused, I will update the code, but basically what I would like to do is to make visible only the elements that are in the array.

  • @NGTHM4R3 I updated the answer. I hope I can help.

Show 3 more comments

2 answers

1


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

$.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 time item.

What you would have to do is hide all before and in the loop show only the array items, placing 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();
});

  • Simple logic and I hadn’t even noticed, thank you very much :)

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.