Question

我想在wordpress博客中为社交分享按钮创建一个bootstrap模式。为了使模态可见，我必须将它放在帖子（循环）之外，但它的触发器（按钮）位于帖子内。我想将帖子的URL和标题传递给模态中的共享按钮。我在帖子中创建了两个变量来获取其URL和标题：

 <?php 
 // Get current post URL 
 $URL = get_permalink();     
 // Get current post title
 $Title = str_replace( ' ', '%20', get_the_title());  ?>

然后，我在帖子中创建了触发器来显示模态

<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>

在模态体中，我有很多按钮，比如

<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>    
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>

我想要做的是将Facebook和Twitter的href中的$ URL替换为帖子的URL以及标题。我知道我必须使用JavaScript，但我无法弄清楚正确的语法。将感谢您的帮助。：）

Answer 1

您必须使用PHP输出它们：

<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>

<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>

Answer 2

$（＆＃34; .ssk-facebook＆＃34;）。attr（＆＃34; href＆＃34;，＆＃34; YourNewURL＆＃34;）;

$（＆＃34; .ssk-twitter＆＃34;）。attr（＆＃34; href＆＃34;，＆＃34; YourNewURL＆＃34;）;

Answer 3

$( "#socialbtn" ).click(function() {

   $(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");

   $(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");

});

Answer 4

使用数据属性为每个帖子的分享按钮添加链接： -

<强> HTML

<!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>

<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Share </h3>
  </div>
    <div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>

<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>

    </div>
</div>

<强> JS

<script>
$(document).on("click", ".open-share", function () {
     var url = $(this).data('url');
     var title = $(this).data('title');
       $('#facebook').attr("href", "http://facebook.com?share="+url);
       $('#facebook').attr("title", "http://twitter.com?share"+title);
       $('#twitter').attr("href", url);
       $('#twitter').attr("title", title);
// Initialize popup with Javascript.
     $('#sharepopup').modal('show');
});


</script>

Answer 5

您必须确定用户点击了哪个按钮。

您可以使用唯一ID或通过为每个帖子添加包含正确href的隐藏输入或div来存档。

然后选择那些＆＃34; href-container＆＃34;相对于按钮并改变模态。（＆＃34; nearest（），parent（），nextAll（）等。）

您是否需要代码示例？

Answer 6

我是这样做的：在触发按钮中，我按如下方式设置数据属性：

<button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>

然后在单独的变量中获取facebook和twitter URL，然后按如下方式设置href属性：

<script>
$(document).on("click", "#socialbtn", function () {
     var url = $(this).data('url');
     var title = $(this).data('title');
     var fburl = "https://www.facebook.com/sharer.php?u="+url;
     var twurl = "https://twitter.com/share?url="+url+"&text="+title;
     $("#facebook").attr("href", fburl);
     $("#twitter").attr("href", twurl);
</script>

在模态体中，使用锚标记如下：

<a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>

如何将PHP变量传递给JavaScript onclick，然后将它们插入到Bootstrap Modal中

6 个答案: