WordPress在jQuery中调用POST-ID

时间:2015-06-19 作者:tibewww

我在这里解释我的情况:

在我的主页上,我有一个正在显示的帖子列表。

我有一个类似模式框的代码来分享这篇文章。基本上,每个帖子上都有一个按钮共享。单击后,将显示一个框,其中包含指向FB、twitter等的共享链接。如下所示:http://www.joe.ie/ (包括出现的Fadein背景)。

问题是,它没有显示好的帖子共享。。。但他们都是。我的意思是,当我点击A帖的共享按钮时,它应该会显示A帖的标题。

现在,我点击了帖子A、B或C的共享按钮。它显示了与所有帖子“A”、“B”、“C”等相关的框。

为了解决这个问题,我添加了一个post\\u ID类。然而,它并没有改变任何东西——我想我需要在jquery中添加它——但如何?下面是我的jquery

<script type="text/javascript">

   $(document).ready(function() {

      $(\'a.share2\').click(function() {

        $(.icons2\').fadeIn(\'500\');
        $(\'.bg2\').fadeIn(\'500\');
        $(\'a.share-close\').fadeIn(\'500\');
        $(\'#nav-wrapper\').css(\'z-index\',\'-1\');

       });

   });
</script>
以及我的循环,其中我将post\\u id作为一个类调用:

<div id="top-story-left">
                        <?php if(get_option(\'mvp_featured_left\') == \'Select a category:\') { ?>
                        <?php } else { ?>
                            <span class="top-header-contain"><h3><?php echo get_option(\'mvp_featured_left\'); ?></h3></span>
                            <ul class="top-stories">
                                <?php if (!empty($do_not_duplicate)) { $current_category = get_option(\'mvp_featured_left\');
                                 $category_id = get_cat_ID($current_category); $recent = new WP_Query(array( \'cat\' => $category_id, \'post__not_in\' => $do_not_duplicate,
                                  \'posts_per_page\' => \'2\'  )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; if (isset($do_not_duplicate)) {  ?>

                                <li class="post-<?php the_ID(); ?>">
                                    <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <?php if (  (function_exists(\'has_post_thumbnail\')) && (has_post_thumbnail())  ) { ?>
                                        <div class="top-story-image">
                                            <?php the_post_thumbnail(\'small-thumb\'); ?>
                                            <?php if(get_post_meta($post->ID, "mvp_video_embed", true)): ?>
                                                <div class="video-button">
                                                    <img src="<?php echo get_template_directory_uri(); ?>/images/video-but.png" alt="<?php the_title(); ?>" />
                                                </div><!--video-button-->
                                            <?php endif; ?>
                                        </div><!--top-story-image-->
                                    <?php } ?>                                          <span class="time2" style="  font-size: 12px;
  padding-bottom: 20px;
  position: relative;
  bottom: 6px;
  color: #2E5894;font-family: \'Open Sans Condensed\', serif !important;display:block;width:50px;margin:0 auto;padding-bottom:0px
}"><?php echo time_ago(); ?></span>

                                    <h2><?php the_title(); ?></h2>
                                    </a>
                                        <div class="sm-middle">
                        <span class="social-middle" style="top:-5px;position:relative">

                            <div class="share-trigger" style="margin-bottom:50px">
                            <a class="share2" href="javascript:void(0)"><img width="25" height="25" style="float:left" src="http://mysite.co.uk/wp-content/uploads/2015/06/share.png">
                                <p style="top:5px;position:relative"> SHARE</p></a></div>

                            <div class="bg2" style="display:none">

                            <div style="display:none" class="icons2">
<span class="header-share-box"><p style="padding:10px;text-transform:uppercase">share this article<a class="share-close" 
    style="color:white;text-decoration:none;position:relative;display:none;z-index:999;float:right;top:-8px"  href="javascript:void(0)"> 
            <img width="30" height="30"  src="http://mysite.co.uk/wp-content/uploads/2015/06/close.png" /> </a></p>
    </span><br/>

<p style="color:black;font-weight:bold">Share the following article: "<?php the_title(); ?>" </p>

                                <a style="width: 22px;
  left: 0px;
  position: relative;top:10px"  href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&text=<?php the_title(); ?>">
    <img width="50" heigh="50" src="http://mysite.co.uk/wp-content/uploads/2015/06/fb1.png" alt="Facebook" /></a>

<a style="  width: 22px;
  left: 10px;
  position: relative;top:10px" href="#" onclick="window.open(\'http://twitter.com/share?text=<?php the_title(); ?> -&url=<?php the_permalink() ?>\', \'twitterShare\', \'width=626,height=436\'); return false;" title="Tweet This Post">
    <img width="50" heigh="50" src="http://mysite.co.uk/wp-content/uploads/2015/06/twitter.png" alt="Twitter" /></a>

                            <a style="width: 22px;
  left: 20px;
  position: relative;top:10px"  href="mailto:[email protected]?subject=I woud like to share with you this article from X: <?php the_title(); ?>&body=I saw this article on X, and thought it may interrest you from X: <?php the_permalink() ?> ">
    <img width="50" heigh="50" src="http://mysite.co.uk/wp-content/uploads/2015/06/mail.png" alt="Mail" /></a>

</span></div></div>
</div>
                                </li>
                                <?php } endwhile; } ?>
                            </ul>
                        <?php } ?>
                    </div><!--top-story-left-->
任何名人都会非常棒,至少要知道我是否走上了正确的道路:):):)

谢谢大家:)

1 个回复
SO网友:Sisir

这个问题更像是一个js/jQuery,而不是WordPress。我不会发布一个有效的答案,因为很难阅读给出的html。我认为你现在的做法并不是一个有效的解决方案。我的回答应该会引导你找到更好的解决方案。

首先,您不需要淡入弹出窗口中的所有元素。仅在父元素中淡入并隐藏父元素。

If popup html parent is like this:

<div class="popup" style="display:none">
    <!-- all child element here-->
</div>

Js for this should be like

$(\'.popup\').fadeIn(500);
对我来说,我只会在页脚中输出一次弹出式html。然后在单击特定的post元素时动态更新弹出的html。

For example

<div id="popup" style="display:none">
    <a class="facebook" href="#">Share in facebook</a>
    <a class="twitter" href="#">Share in Twitter</a>
</div>
单击时,我将在循环中放置链接以启动弹出窗口

<a class="share_link" href="#" data-permalink="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>">Click to Share</a>
在中单击时更新弹出窗口的js代码示例share_link 锚定元件

$(\'.share_link\').click(function(){
    var $this = $(this);

    // gather data
    var permalink = $this.data(\'permalink\');
    var id = $this.data(\'id\');
    var title = $this.data(\'title\');

    // update popup
    $popup = $(\'#popup\');
    $popup.find(\'.facebook\').attr(\'href\', facebook_share_link(permalink, title));
    $popup.find(\'.twitter\').attr(\'href\', twitter_share_link(permalink, title));

   // show the popup
   $popup.fadeIn(500);
});

var facebook_share_link = function(permalink, title){
    // generate the appropriate link to facebook
}

var twitter_share_link = function(permalink, title){
    // generate the appropriate link to twitter
}
希望这有帮助。

结束

相关推荐

调用wp_ajax_nopriv时的PHP会话

我正在尝试使用wordpress ajax调用api处理会话,但没有成功。在功能开始时。php写入:if (!session_id()) { session_start(); } 例如,在执行ajax调用以实现功能时add_action( \'wp_ajax_nopriv_compare_objects_request\', \'compare_objects_request\' ); “compare\\u objects\\u request”功能中的会话不