4

Tenho o seguinte código jQuery:

$('.dock-a').hide();
$('.dock').each(function(){
    var DOCK = $(this);
    DOCK.click(function(){
        var DOCK_largura = $(window).width(),
            DOCK_index = $(this).index(),
            DOCK_content = $('.dock-content:eq('+DOCK_index+')'),
            DOCK_a = $('.dock-a:eq('+DOCK_index+')');
        beforeClick = $(window).scrollTop();

        DOCK_content.animate({ 'width': DOCK_largura+'px' }, 500);
        DOCK_a.delay(500).show().animate({ 'opacity':'1' }, 300);
        DOCK_content.delay(400).animate({ 'height': DOCK_a.outerHeight(true)+'px' }, 200);      
    });
});

A finalidade dele é: quando alguém clicar em um link com a classe .dock, ele abre um conteúdo em cima da página atual, semelhante a uma shadowbox. O problema é que somente o primeiro link funciona, acredito que está dando alguma falha em obter o valor index de cada elemento sequencial.

No HTML está assim:

<div class="link">
   <div class="box">
      <a href="#" class="dock">Um</a>
   </div>
</div>
<div class="link">
   <div class="box">
      <a href="#" class="dock">Dois</a>
   </div>
</div>
<div class="link">
   <div class="box">
      <a href="#" class="dock">Três</a>
   </div>
</div>

<div class="dock-content">
   <div class="dock-a">
      Texto do link Um.
   </div>
</div>
<div class="dock-content">
   <div class="dock-a">
      Texto do link Doi.
   </div>
</div>
<div class="dock-content">
   <div class="dock-a">
      Texto do link Três.
   </div>
</div>

Testei um script simples em um arquivo á parte, com a mesma funcionalidade e deu certo. Provavelmente é o valor index que está dando erro, mesmo.

1 Resposta 1

3

O .index() retorna o índice do elemento pedido em relação ao elemento pai. No seu caso, todos os links terão índice zero. Acho que você quer o índice do elemento .link que contém o link, certo? Nesse caso, pode fazer assim:

$('.dock-a').hide();
$('.dock').each(function(){
    var DOCK = $(this);
    DOCK.click(function(){
        var DOCK_largura = $(window).width(),
            DOCK_index = $(this).closest('.link').index(), // <--- mudança aqui
            DOCK_content = $('.dock-content:eq('+DOCK_index+')'),
            DOCK_a = $('.dock-a:eq('+DOCK_index+')');
        beforeClick = $(window).scrollTop();

        DOCK_content.animate({ 'width': DOCK_largura+'px' }, 500);
        DOCK_a.delay(500).show().animate({ 'opacity':'1' }, 300);
        DOCK_content.delay(400).animate({ 'height': DOCK_a.outerHeight(true)+'px' }, 200);      
    });
});
7
  • 2
    Perfeito! Agora funcionou direitinho. Muito obrigado \o
    – Ricardo
    Commented 15/12/2014 às 18:15
  • Amigo, estou com um problema! De repente parou de funcionar. Eu adicionei mais links e mais conteúdo e eu clico no 7º link, por exemplo, e abre o conteúdo do 3º.
    – Ricardo
    Commented 16/12/2014 às 17:08
  • 1
    @Ricardo Você consegue montar um exemplo que reproduza o problema ho jsfiddle.net? Talvez seja o caso de postar uma pergunta nova sobre isso, mas deixa eu ver o código antes.
    – bfavaretto
    Commented 16/12/2014 às 17:14
  • 1
    Entendi, @Ricardo. Como eu expliquei na resposta, o index é o índice do elemento em relação ao pai, incluindo todos os filhos do pai (não só os com a sua classe). Pelo que estou vendo, usar index não é uma boa abordagem no seu caso, sugiro algo diferente: jsfiddle.net/3tvqhcys/4
    – bfavaretto
    Commented 16/12/2014 às 17:41
  • 1
    Outra coisa: reparei que você tem IDs repetidos no seu HTML, isso não pode... @Ricardo
    – bfavaretto
    Commented 16/12/2014 às 17:47

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 .