javascript - 我想创建一个带有动态内容的 Bootstrap 弹出窗口

Question

我正在尝试使用 bootstrap 制作一个弹出窗口，并将 PHP 中的动态内容放入其中(HTML 代码)。

我有以下代码:

<a class="psprn"
href="'.$prnUrl.'"
data-toggle="popover"
data-content="'.$prnName.'"
data-pspicture="'.$prnImage.'"
data-psrank="'.$prnRank.'"
data-psvideo="'.$prnVideos.'">'.$prnName.'</a>

这个 anchor 是用户的链接，所以我可以有 2、3、4(等等)个用户。 该 anchor 放置在“foreach”Yii 应用程序上，因此他具有动态内容(具有特定的图像、链接、排名、视频、内容)。

我有这个js代码:

$('[data-toggle="popover"]').hover(function () {
    var psrank = $(this).attr("data-psrank");
    var psvideo = $(this).attr("data-psvideo");
    var pspicture = $(this).attr("data-pspicture");
    var pscontent = $(this).attr("data-content");
//        console.log(psrank);
//        console.log(psvideo);
//        console.log(pspicture);
//        console.log(pscontent);

    $('[data-toggle="popover"]').popover({       
        trigger: 'hover',
        template: 
            '<div class="ps-placeholder>'+
                '<div class="picture">'+
                    '<img src="prnImage">'+
                '</div>'+
                '<div class="footy">'+
                    '<p>$prnName</p>'+
                    '<span>Rank: $prnRank &nbsp;&nbsp;&nbsp;&nbsp; Videos: $prnVideos</span>'+
                '</div>'+
            '</div>',
    });
});

但是出了点问题。我无法将数据属性的值放在工具提示模板上。

信息:

• Bootstrap v4.0.0-alpha.4
• jQuery v2.2.3

Answer 1

您当前拥有的内容将不起作用。您的变量名称被解释为字符串。您需要将 " 替换为 ` 符号，然后就可以在字符串中使用 ${someVariable} 。

这是一个基本示例。

//Your dynamic content
var catImage = "http://n-z.tv/wp-content/uploads/2017/08/cat-1024x683.jpg";
var message = "Hey this is some dynamic content";
var title = "Some Dynamic Content"

//Create the string and insert it into the body (or the "template" for you)
document.body.innerHTML = `
<div>
  <h3>${title}</h3>
  <img src="${catImage}"/>
  <p>${message}</p>
</div>
`

img {
  width: 100px;
}

您可以通过创建一个处理此问题的函数来更进一步。

let generateDynamicContent = function(title, imageSrc, message){
    return `<div>
      <h3>${title}</h3>
      <img src="${imageSrc}"/>
      <p>${message}</p>
    </div>
    `
}

let dynamic = document.getElementById("dynamic");
let container = document.getElementById("container");

let imageSrcs = [
  "https://404store.com/2017/08/19/cat-wallpaper-1024.jpg",
  "https://fanparty.ru/fanclubs/cats/gallery/534626_cats.jpg",
  "http://n-z.tv/wp-content/uploads/2017/08/cat-1024x683.jpg"
];

let counter = 0;
dynamic.addEventListener("click", function(){

    let content = generateDynamicContent(
      `Dynamic title #${++counter}`, 
      imageSrcs[counter%imageSrcs.length],
      `Dynamic content #${counter}`
    )
    container.innerHTML = content;

});

img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

<button id="dynamic">Click me for dynamic content</button>
<div id="container"></div>