Question

我试图插入大的自定义FB分享按钮。

我能够让它出现，但问题开始发生在jquery上。

我在同一个帖子上有2个fb共享按钮，但只有其中一个共享弹出窗口打开。我该怎么做才能使第二个共享弹出窗口工作？您可以使用以下代码找到下面的代码：

<?php
/**
* The single post loop Default template
**/

if (have_posts()) {
the_post();

$td_mod_single = new td_module_single($post);
?>

<article id="post-<?php echo $td_mod_single->post->ID;?>" class="<?php echo join(' ', get_post_class());?>" <?php echo $td_mod_single->get_item_scope();?>>
    <div class="td-post-header">

        <?php echo $td_mod_single->get_category(); ?>

        <header class="td-post-title">
            <?php echo $td_mod_single->get_title();?>


            <?php if (!empty($td_mod_single->td_post_theme_settings['td_subtitle'])) { ?>
                <p class="td-post-sub-title"><?php echo $td_mod_single->td_post_theme_settings['td_subtitle'];?></p>
            <?php } ?>


            <div class="td-module-meta-info">
                <?php echo $td_mod_single->get_author();?>
                <?php echo $td_mod_single->get_date(false);?>
                <?php echo $td_mod_single->get_comments();?>
                <?php echo $td_mod_single->get_views();?>
            </div>

        </header>

    </div>

    <?php echo $td_mod_single->get_social_sharing_top();?>


    <div class="td-post-content">
    <div class="big-facebook-share" data-url="<?php echo home_url(add_query_arg(array(),$wp->request));?>" id="fb-share-button">
                                    <span class="big-share-text"><?php  _e('Share on facebook','fb');?></span>
                                </div>
                                <script>

                                    jQuery(function(){
                                        jQuery("#fb-share-button").on('click', function () {
                                            fbShare(jQuery(this).attr("data-url"));
                                        })
                                    });

                                    function fbShare(url) {
                                        var width=640;
                                        var height=320;
                                        var leftPosition, topPosition;
                                        leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
                                        topPosition = (window.screen.height / 2) - ((height / 2) + 50);
                                        var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=no,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
                                        var u=location.href;
                                        var t=document.title;
                                        window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
                                        return false;
                                    }
                                </script>


    <?php
    // override the default featured image by the templates (single.php and home.php/index.php - blog loop)
    if (!empty(td_global::$load_featured_img_from_template)) {
        echo $td_mod_single->get_image(td_global::$load_featured_img_from_template);
    } else {
        echo $td_mod_single->get_image('td_696x0');
    }
    ?>

    <?php echo $td_mod_single->get_content();?>



        <div align="center"> <?php echo do_shortcode('[fb_button]'); ?></div>
        <div class="big-facebook-share" data-url="<?php echo home_url(add_query_arg(array(),$wp->request));?>" id="fb-share-button">
                                    <span class="big-share-text"><?php  _e('dhare on facebook','fb');?></span>
                                </div>


    <?php echo do_shortcode('[fbcomments url="https://facebook.com/Facebook/" width="700" count="off" num="3" countmsg="wonderful comments!"]'); ?>
    </div>


    <footer>
        <?php echo $td_mod_single->get_post_pagination();?>
        <?php echo $td_mod_single->get_review();?>

        <div class="td-post-source-tags">
            <?php echo $td_mod_single->get_source_and_via();?>
            <?php echo $td_mod_single->get_the_tags();?>
        </div>

        <?php echo $td_mod_single->get_social_sharing_bottom();?>
        <?php echo $td_mod_single->get_next_prev_posts();?>
        <?php echo $td_mod_single->get_author_box();?>
        <?php echo $td_mod_single->get_item_scope_meta();?>
    </footer>

</article> <!-- /.post -->

<?php echo $td_mod_single->related_posts();?>

<?php
} else {
//no posts
echo td_page_generator::no_posts();
}

Answer 1

您的jQuery选择器定位于id，因为按钮具有相同的id（它们应该是唯一的），所以只有一个正在运行。请考虑为每个按钮指定唯一的id或更新您的jQuery选择器以使用class。

jQuery(".big-facebook-share").on("click", function() {...});

在帖子中插入自定义FB共享按钮（Wordpress）

1 个答案: