动态 Bootstrap 弹出框内容

Question

我有一个 link 正在切换 Bootstrap 弹出框：

<a href="#" data-toggle="popover" title="List of Stuff" data-rights="${result.itemId}">Toggle Popover</a>

现在在后端，result.itemId 包含我需要在弹出窗口中显示的国家/地区列表。我有弹出窗口调用和一个 for 循环来列出与 result.itemId 相关联的所有国家 PLUS 一个 console.log 在控制台中正确显示所有国家，我只是不知道如何让它们在弹出窗口中正确显示。

这是我的 Javascript:

$(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function(){
        var rights = $(this).data('rights');
        var countries = resultsCountries[rights];
        for (var i in countries) {
            $(".popover-content").append('<span>' + i + ' &ndash; ' + countries[i] + '<span/><br/>');
            console.log(i, countries[i]);
        }
    }
  })
})

就像我说的，在控制台中，与此 result.itemId 关联的所有国家/地区都按应有的方式显示，因此我能够访问存储这些国家/地区的数据库，我只是不不知道如何让它们显示在弹出窗口中 "popover-content"。

我要补充一点，这是动态的，因此根据 result.itemId，弹出窗口的内容会有所不同。

提前致谢。

Answer 1

您必须 return 内容函数中的元素（通过在每次迭代时向变量添加跨度）。

这是一个例子：

$(function() {

  var resultCountries = ['Germany', 'France', 'Spain'];

  $('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
      var result = $();
      for (var i in resultCountries) {
        result = result.add(('<span>' + i + ' &ndash; ' + resultCountries[i] + '<span/><br/>'));
        console.log(i, resultCountries[i]);
      }
      return result;
    }

  });

});

CODEPEN

Answer 2

所以...除了被告知，用这么多的话 "that's just the way it is"，我继续挖掘，你瞧，答案自己出现了。

$(function () {
  $('[data-toggle="popover"]').popover({
    html: true,
    placement: 'auto right',
    content: function(){
        var rights = $(this).data('rights');
        var content = "";
        var countries = resultsCountries[rights];
        for (var i in countries) {
            content += '<span>' + i + ' &ndash; ' + countries[i] + '<span/><br/>';
        }
        return content;
    }
  })
})

我在其他几个问题中看到人们想要动态设置他们的内容，他们总是在末尾有一个 return，这将正确填充弹出窗口。追加也是一个问题。相反，我设置了一个字符串变量 "content"，然后通过循环简单地 += 更多内容。

结果完全符合预期，用户单击 link，弹出窗口显示与 result.itemId 关联的国家/地区。

动态 Bootstrap 弹出框内容

Dynamic Bootstrap Popover Content

java

jquery

twitter-bootstrap

append

popover

CODEPEN