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相关联的所有国家/地区PLUS正在显示控制台中所有国家/地区的console.log，我只是不知道如何拥有它们在popover中正确显示。

这是我的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＆＃34; popover-content＆＃34;中显示。

我应该补充一点，这是动态的，因此根据result.itemId，popover的内容会有所不同。

提前谢谢。

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

Answer 2

所以...除了被告知之外，用这么多的话来说，“这就是它的方式”，我继续挖掘，并且看，答案就出现了。

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

我在其他几个问题中看到人们想要动态设置内容，他们总是会在最后返回，这样就可以正确填充popover。追加也是一个问题。相反，我设置了一个字符串变量“content”，然后通过循环简单地+ =更多内容。

结果完全符合要求，用户点击链接，弹出窗口显示与result.itemId相关联的国家/地区。

动态Bootstrap Popover内容

2 个答案:

CODEPEN