12

この解決策は、1 つのボタンの場合には問題ありません。Twitter のポップオーバーのコンテンツとして div を使用することは可能ですか?

しかし、私のページにはたくさんのポップオーバーがあります (たとえば 50-100)。
したがって、このソリューションを変更する必要があります。

これは@jäviの解決策です：

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

私のボタンにはそれぞれ独自のIDがあります。

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
  <div>This is your div content</div>
</div>

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
  <div>This is your div content</div>
</div>

では、この JavaScript コード スニペットを書き直して、すべてのボタンをカバーするにはどうすればよいでしょうか。

4

5 に答える 5

13

自分でこれと戦っただけです。ポップオーバーをトリガーする要素に id を入れる必要があります。次のようなカスタム データ属性を使用します (「data-id」と呼ばれます)。

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>

次に、javascript を少し変更して、data-id 属性値をプログラムで取得できます。

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $($(this).attr('data-id')).html();
    }
  });
});
于 2012-07-25T22:39:31.273 に答える
4

ソース要素を別の属性で汚染したくない場合は、属性をテキストまたは CSS セレクターとしてdata-*使用する簡単で一般的な方法を次に示します。data-content

$('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
        var content = $(this).data('content');
        try { content = $(content).html() } catch(e) {/* Ignore */}
        return content;
    }
});

data-contentテキスト値で属性を 使用できるようになりました。

<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>

...またはdata-contentCSS セレクター値で属性を 使用します。

<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>

<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>

ここでこのソリューションをテストできます: http://jsfiddle.net/almeidap/eX2qd/

...またはここ、Bootstrap 3.0 を使用している場合: http://jsfiddle.net/almeidap/UvEQd/data-content-target (属性名に注意してください!)

于 2013-05-19T18:57:03.840 に答える
1

次のような追加のボタン属性なしで実行できます。

http://jsfiddle.net/isherwood/E5Ly5/

.popper-content {
    display: none;
}

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.pop-content').html();
    }
});
于 2014-02-07T21:50:26.777 に答える
0

ポップオーバー html を含む div の ID を a 要素の rel 属性に格納します

<a rel="popover_div2" ... >click</a>

次に、クリックリスナー内のクリックアンカーのrelを取得します（ポップオーバーメソッドがそれをどのように保存するかはわかりませんが、確実に保存されます）：

var myRel = $(this).attr(rel);
return $(myRel).html();
于 2012-07-05T17:12:16.390 に答える
0

私にとってはそうです

data-id="#popover_div1"

ボタンの HTML 内 (div の ID を指定するための # を使用)。

于 2013-03-03T11:01:29.143 に答える