1

Alguém pode explicar porque meu código não funciona? Eu não sei exatamente quantas divs irão gerar, mas o máximo são 25.

Então queria que a cada botão de click, abrisse especificamente a div "cola" ligada a ele.

No meu pensamento, coloquei um for que vai percorrendo, dando nome a classe --- se i for 2 o click_a2 vai abrir o cola2 e assim por diante.

O jQuery e o HTML:

    for (i = 0; i < 25; i++) {
            $('.click_a'+i).click(function () {
                    $('.cola'+i).slideToggle();
            });
        };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click_a1"> Detalhes </button>
        <div class="cola1" style="display:none" >
        hey!
        </div>

Obs: Entenda-se que colocarei uma variável (no lugar do 1) que irá somar tudo que esse código rodar.

https://jsfiddle.net/rgLjpb7s/

1 Resposta 1

1

O teu código não funciona porque esse i já não tem o valor que queres que tenha quando o click fôr chamado.

Se criares um escopo novo isso já funciona, assim o valor da variável fica guardado dentro desse escopo:

for (i = 0; i < 25; i++) {
    (function (i) {
        $('.click_a' + i).click(function () {
            $('.cola' + i).slideToggle();
        });
    })(i)
};

jsFiddle: https://jsfiddle.net/rgLjpb7s/1/

Podes também fazer assim uma vez que estás a usar jQuery:

$('[class^=click_a').each(function (i) {
    (function () {
        var nr = i + 1;
        var cola = $('.cola' + nr);
        $(this).click(function () {
            cola.slideToggle();
        });
    })();
});

tem 2 vantagens: funciona para n numero de .click_a, outro é que coloca o elemento que faz slide em cache melhorando um pouco a performance.

jsFiddle: https://jsfiddle.net/rgLjpb7s/3/

1
  • 1
    Muito obrigado, terei que estudar um pouco mais para conseguir entender porque isso acontece. Pensei que a variável continuaria o mesmo valor, uma vez que não sai do for. Em todo caso, obrigado!
    – dHEKU
    6/05/2015 às 18:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .