多个动态show();到了ul

时间:2014-03-01 02:07:12

标签: javascript jquery html wordpress

在我的博客卷中,我需要点击链接,然后显示社交分享菜单。但是,当我这样说:

$(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>

那该怎么办?

1 个答案:

答案 0 :(得分:0)

使用eq()方法使用索引选择jQuery对象,并使用 each() 方法获取每个span标记

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