Question

我有5个不同的弹出窗口，但是所有的弹出窗口都显示相同的文本。有帮助吗？感谢。

<label class="radio span1">
        <input type="radio" name="optionsRadios" value="option1">Level 1 
            <a href="#" rel="popover" data-toggle="popover" data-placement="top" id="level1">?</a>
            <div id="acuty-level" class="popover">Level 1</div>
    </label>

    $('[rel=popover]').popover({
      html: true,
      content: function () {
       return $('#acuty-level').html();
     }
    });

http://jsfiddle.net/labanino/824uJ/2/

Answer 1

您有重复的ID问题。 Html不得包含多个具有相同ID的元素。

有多个ID为acuty-level的元素。只需删除ID或具有唯一ID。您的id选择器将始终只获取DOM中存在的标识为acuty-level的第一个元素，因此您会看到此行为。

<div id="acuty-level" class="popover">Level 1</div>

在脚本中使用内容函数中的this上下文来获取作为兄弟的popover，你应该修复你的问题。

脚本

$('[rel=popover]').popover({
    html: true,
    content: function () {
        return $(this).siblings('.popover').html();
    }
});

Demo

Answer 2

编辑：@PSL有一个更优雅的解决方案

您正在使用id="acuty-level"用于所有邮件。 ID只能在页面中使用一次。所有其他实例都将被忽略。为每个弹出窗口提供自己的特定ID，如下所示：

HTML：

<label class="radio span1">
            <input type="radio" name="optionsRadios" value="option1">Level 1 
                <a href="#" rel="popover" data-toggle="popover" data-placement="top" id="level1">?</a>
                <div class="acuty-level1" class="popover">Level 1</div>
        </label>

Javascript部分：

$('[rel=popover]').popover({
    html: true,
    content: function () {
        return $('#acuty-level1').html();
    }
});

重复所有其他popovers

Bootstrap popover在所有弹出窗口中显示相同的文本

2 个答案:

脚本

Demo