Question

我正在尝试使用bootstrap创建一个popover并将PHP中的动态内容放入其中（HTML代码）。

我有以下代码：

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

这是一个用户链接，所以我可以拥有2,3,4（等等）用户。此锚点放置在'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}。

这是一个基本的例子。

＆＃13;

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

＆＃13;

img {
  width: 100px;
}

＆＃13;

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

＆＃13;

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;

});

＆＃13;

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

＆＃13;

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

＆＃13;

我想创建一个包含动态内容

1 个答案: