Как работает один цикл?

Question

У меня есть этот пример:

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

я не имею никакого знания в JQuery, я увидел, что использовать его также. Каждый, но все, что я пробовал, не работал, он как бы только перебирает цикл только один раз и что только время будет последним проходом цикла.

И я хочу, чтобы это работало

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

Answer 1

Вы можете пересмотреть ваш код, удаляя петлю и с помощью класса и data-attribute.

Таким образом вы можете связать действие с двумя селекторами и использовать атрибут data-id в качестве точки привязки между элементами.

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> 

Код:

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

Демо: http://jsfiddle.net/IrvinDominin/DCJFr/

Answer 2

Loop работает нормально. Вы также можете сделать это. Кэширование элементов DOM является лучшим способом для ускорения кода:

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