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

时间:2016-01-05 12:13:43

标签: javascript php jquery wordpress

我想在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,但我无法弄清楚正确的语法。 将感谢您的帮助。 :)

6 个答案:

答案 0 :(得分:0)

您必须使用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>

答案 1 :(得分:0)

$(&#34; .ssk-facebook&#34;)。attr(&#34; href&#34;,&#34; YourNewURL&#34;);

$(&#34; .ssk-twitter&#34;)。attr(&#34; href&#34;,&#34; YourNewURL&#34;);

答案 2 :(得分:0)

$( "#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 ?>");

});

答案 3 :(得分:0)

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

<强> 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>

答案 4 :(得分:0)

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

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

然后选择那些&#34; href-container&#34;相对于按钮并改变模态。 (&#34; nearest(),parent(),nextAll()等。)

您是否需要代码示例?

答案 5 :(得分:0)

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

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