How does one loop functions?

Question

I have this example:

$(document).ready(function(){               
    var i = 1;
    var abrir = String('.soft-titulo-vaga a#abrir' + i);
    var fechar = String('.soft-titulo-vaga a#fechar' + i);
    var vaga = String('div#vaga' + i);

    $(abrir).click(function(){
        $(abrir).css('display', 'none');
        $(fechar).css('display', 'block');
        $(vaga).slideDown('slow');
    });
    $(fechar).click(function(){         
        $(fechar).css('display', 'none');
        $(abrir).css('display', 'block');           
        $(vaga).slideUp('slow');
    });
});

I have no knowledge in jquery, I saw that the to use it also. Each, but everything I tried did not work, it is as if only entrase in loop only once, and that only time would be the last pass of the loop.

And I want this to work

$(document).ready(function(){               
    for(var i = 1; i < 15; i++){
        var abrir = String('.soft-titulo-vaga a#abrir' + i);
        var fechar = String('.soft-titulo-vaga a#fechar' + i);
        var vaga = String('div#vaga' + i);

        $(abrir).click(function(){
            $(abrir).css('display', 'none');
            $(fechar).css('display', 'block');
            $(vaga).slideDown('slow');
        });
        $(fechar).click(function(){
            $(fechar).css('display', 'none');
            $(abrir).css('display', 'block');           
            $(vaga).slideUp('slow');
        });
    }
});

You need to set a closure, this has been answered hundred times before — A. Wolff, Dec 17 '13 at 11:55
Pro tip: in JavaScript, you shouldn't use the `String` object to create strings. You can just do `var x = 'whatever' + i;`. — JJJ, Dec 17 '13 at 11:57
You could use starts-with selector `^=` `$('div[id^="vaga"]')` documentation here http://api.jquery.com/attribute-starts-with-selector/ — Anton, Dec 17 '13 at 11:57
The loop works but loop function does not work $(".soft-titulo-vaga a#abrir1").click(function(){ ... $(".soft-titulo-vaga a#abrir2").click(function(){ ... $(".soft-titulo-vaga a#abrir15").click(function(){ ... — Dexxtz, Dec 17 '13 at 11:59
If the function is the same for each a tag why don't you apply it once to the class? — Pete Thorne, Dec 17 '13 at 11:59
@user3110919 because your local variables are outscoped compare to your click handlers. When you click on element, last value is used. Use a CLOSURE to re-set variable in handler scope. And please, read link provided by Juhana — A. Wolff, Dec 17 '13 at 12:00

score 0 · Answer 1 · answered Dec 17 '13 at 12:05

Loop is working fine. You can do by this way as well. Caching of DOM elements is the better way to speedup the code:

$(document).ready(function() {
    for (var i = 1; i < 15; i++) {
        var abrir = $('.soft-titulo-vaga a#abrir' + i);
        var fechar = $('.soft-titulo-vaga a#fechar' + i);
        var vaga = $('div#vaga' + i);
        abrir.click(function() {
            abrir.css('display', 'none');
            fechar.css('display', 'block');
            vaga.slideDown('slow');
        });
        fechar.click(function() {
            fechar.css('display', 'none');
            abrir.css('display', 'block');
            vaga.slideUp('slow');
        });
        console.log(i);
    }
});

score 0 · Accepted Answer · answered Dec 17 '13 at 12:12

You can reconsider you code by removing the loop and using class and data-attribute.

In this way you can bind action with two selectors, and use the data-id attribute as linking point between elements.

HTML:

<div class="soft-titulo-vaga"> 
    <a class="abrir" data-id="1">abrir demo 1</a>
    <a class="fechar" data-id="1">fechar demo 1</a>
    <div class="vaga" data-id="1">vaga demo 1</div>

    <a class="abrir" data-id="2">abrir demo 2</a>
    <a class="fechar" data-id="2">fechar demo 2</a>
    <div class="vaga" data-id="2">vaga demo 2</div>
</div>

Code:

$(document).ready(function () {
    $('.abrir').click(function () {
        $(this).hide();
        $('.fechar[data-id=' + $(this).attr("data-id")+']').show();
        $('.vaga[data-id=' + $(this).attr("data-id")+']').slideDown('slow');
    });
    $('.fechar').click(function () {
        $(this).hide();
        $('.abrir[data-id=' + $(this).attr("data-id")+']').show();
        $('.vaga[data-id=' + $(this).attr("data-id")+']').slideUp('slow');
    });
});

Demo: http://jsfiddle.net/IrvinDominin/DCJFr/

How does one loop functions?

2 Answers2