多重動態顯示（）;到ul的

Question

在我的博客中，我需要點擊一個鏈接，然後顯示一個社交分享菜單。但是，當我把這個：

$(document).ready(function() { 
    $("ul.social").hide(); 

    $("span.link").click(function(){ 
    $("ul.social").show("slow"); 
    }); 
}); 

每當我點擊span.link，它顯示所有ul.social。我需要只顯示參考ul.social。

這是循環：

  <section class="post-home-content"> 
      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?> | <?php bloginfo('name') ?> | <?php bloginfo('description') ?>"><?php the_title(); ?></a></h2> 
      <p><?php the_field('sub_titulo'); ?></p> 

      <span class="link">Share</span> 

      <time class="post-time" datetime="<?php the_time('d-m-Y'); ?> <?php the_time('G:i'); ?>"><?php the_time('d/m/Y'); ?></time> 
      </section> 

      <ul class="social"> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></li> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></li> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></li> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></li> 
      </ul> 

那麼怎麼辦呢？

Answer 1

使用eq()方法使用索引來選擇jQuery對象，並使用each()方法來獲取每個span標籤

$(document).ready(function() { 
    $("ul.social").hide(); 
    $("span.link").each(function(i) { 
     $(this).click(function() { 
      $("ul.social").eq(i).show("slow"); 
     }); 
    }); 
});