如何将PHP变量传递给JavaScript onclick，然后将它们插入Bootstrap Modal - How to pass PHP variables to JavaScript onclick and then insert them into Bootstrap Modal

我想在wordpress博客中为社交分享按钮创建一个引导模式。为了使模态可见，我必须将其放置在post（循环）之外，但将其触发器（按钮）放置在post。我想把文章的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>

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

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

<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:输出它们

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

$（".ssk facebook"）.attr（"href"，"YourNewURL"）；

$（".ssk twitter"）.attr（"href"，"YourNewURL"）；

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

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

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

然后选择那些相对于按钮的"href容器"并更改模式。（"closest（）、parent（）、nextAll（）等）

您需要代码示例吗

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

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>

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