javascript - Twitterのブートストラップポップオーバーが表示されているかどうかを確認するには?

Question

$('#anElement')次のように、潜在的なポップオーバーが添付された要素があります

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>

ポップオーバーが表示されているかどうかを確認する方法を知りたいのですが、これは jQuery でどのように達成できますか?

Answer 1

この機能が使用しているフレームワークに組み込まれていない場合（Twitterブートストラップではなく、ブートストラップのみ）、このブートストラップ機能を作成するには、生成/変更されたHTMLを検査する必要があります。

popupverのドキュメントをご覧ください。そこには、実際の動作を確認するために使用できるボタンがあります。これは、舞台裏で機能しているHTML要素を検査するのに最適な場所です。

Chrome開発者ツールまたは（Firefoxの）Firebugをクラックして開き、何が起こっているかを確認します。<div>ボタンの後に挿入されているだけのようです-

<div class="popover fade right in" style="... />

あなたがしなければならないのは、その要素の存在をチェックすることだけです。マークアップの記述方法に応じて、次のようなものを使用できます-

if ($("#popoverTrigger").next('div.popover:visible').length){
  // popover is visible
}

#popoverTriggerは、そのポップオーバーが最初に表示されるようにトリガーした要素であり、上記で気付いたように、ブートストラップは要素の後にポップオーバーdivを追加するだけです。

Answer 2

現在のバージョンの Bootstrap では、要素がaria-describedby設定されているかどうかを確認できます。属性の値はid、実際のポップオーバーの値です。

たとえば、表示されているポップオーバーのコンテンツを変更したい場合は、次のようにします。

var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');

Answer 3

これは、指定された div が表示されているかどうかを確認します。

if ($('#div:visible').length > 0)

また

if ($('#div').is(':visible'))

Answer 4

おそらく、最も信頼できるオプションは、以下に示すように、表示/非表示のイベントをリッスンすることです。これにより、エラーが発生しやすい DOM を深く掘り下げる必要がなくなります。

var isMyPopoverVisible = false;//assuming popovers are hidden by default  

$("#myPopoverElement").on('shown.bs.popover',function(){
isMyPopoverVisible = true;
});

$("#myPopoverElement").on('hidden.bs.popover',function(){
isMyPopoverVisible = false;
});

これらのイベントは、ユーザーの操作なしでプログラムでポップオーバーを非表示/表示/切り替えた場合でもトリガーされるようです。

PSはBS3でテスト済み。