java - 动态 Bootstrap 弹出内容

Question

我有一个可以切换 Bootstrap Popover 的链接:

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

现在在后端，result.itemId 包含我需要在弹出窗口中显示的国家/地区列表。我有一个 popover 调用和一个 for 循环来列出与 result.itemId 相关联的所有国家加上一个 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

您必须在内容函数中返回您的元素(通过在每次迭代时向变量添加跨度)。

这是一个例子:

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