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-level、DOM に存在する 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 はページ内で 1 回だけ使用してください。他のすべてのインスタンスは無視されます。次のように、各ポップアップに固有の 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 に答える