我正在做一个杂志主题设计，我想知道在http://www.movenourishbelieve.com/ 已实现。

我正在使用一个名为Simple Share Buttons Adder的插件，它只添加按钮。

我已经使用javascript实现了点击功能。这是剧本-

<script>
        $(document).ready(function(){
            $("#thumbup").click(function(){
              $("#hidden-like").toggle();
            });
        });
</script>

我面临的问题是，当我单击某个博客帖子下的竖起大拇指按钮时，所有博客帖子下的社交图标都会打开。如何使我的竖起大拇指按钮仅在放置它的帖子上打开共享图标。

此外，一旦用户单击任何共享按钮，它只需共享该帖子。

这是我博客文章容器的html-

    <div id="entry-07">

                        <?php the_post(); ?>

                        <div class="entry-image-three-col">
                            <?php
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail(\'smaller\');
                                }
                            ?>
                        </div>

                        <div class="entry-title-three-col">

                            <h2>
                                <a href="<?php the_permalink(); ?>" class = "index_blog_title" title="<?php _e(\'Permalink to \', \'kelle\'); ?><?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
                            </h2>

                        </div>

                        <div class="entry-excerpt-three-col">

                            <p> <?php the_excerpt(); ?> </p>

                        </div>

                        <div class="read-more">

                            <a href="<?php echo get_permalink(); ?>">READ MORE</a>

                            <div id="hidden-like" id="post-<?=$wp_query->posts[0]->ID;?>-like">

                                <?php //pinboard_social_bookmarks(); 
                                    echo do_shortcode(\'[ssba]\');
                                ?>

                            </div>  <!--hidden-like end -->

                        </div>  <!-- read-more end -->

                        <div class = "thumb">

                            <img src="http://localhost/wp_the_vitality_project/wp-content/uploads/2014/10/fb_thumb.jpg" id = "thumbup">

                        </div>



</div>  <!-- entry-07 end-->

谢谢

<script type="text/javascript">
    $(document).ready(function() {
        $(\'.thumbup\').on(\'click\', function(){
            $(this).parents(\'.entry\').find(".hidden-like").toggle();
        });
    });
</script>

<div id="entry-07" class="entry">

  <?php the_post(); ?>

  <div class="entry-image-three-col">
    <?php
      if ( has_post_thumbnail() ) {
        the_post_thumbnail(\'smaller\');
      }
    ?>
  </div>

  <div class="entry-title-three-col">

    <h2>
      <a href="<?php the_permalink(); ?>" class = "index_blog_title" title="<?php _e(\'Permalink to \', \'kelle\'); ?><?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
    </h2>

  </div>

  <div class="entry-excerpt-three-col">

    <p> <?php the_excerpt(); ?> </p>

  </div>

  <div class="read-more">

    <a href="<?php echo get_permalink(); ?>">READ MORE</a>

    <div class="hidden-like" id="post-<?=$wp_query->posts[0]->ID;?>-like">

      <?php //pinboard_social_bookmarks(); 
        echo do_shortcode(\'[ssba]\');
      ?>

    </div>  <!--hidden-like end -->

  </div>  <!-- read-more end -->

  <div class="thumb">

    <img src="http://localhost/wp_the_vitality_project/wp-content/uploads/2014/10/fb_thumb.jpg" class="thumbup">

  </div>

</div><!-- entry-07 end-->