2

我有 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/

4

2 回答 2

3

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

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

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

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

脚本

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

演示

于 2013-06-02T02:24:55.790 回答
3

编辑：@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();
    }
});

对所有其他弹出框重复此操作

于 2013-06-02T02:25:36.537 回答