動態Bootstrap Popover內容

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“popover-content”中。

我應該補充一點，這是動態的，因此根據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關聯的國家/地區。