2

簡単なjqueryポップアップを作成しました。私のサイト全体に、それぞれが異なるポップアップにリンクするいくつかのbtnsがあります。

私の質問： 以下で始めたように、すべてのボタンとdivを名前でリストすることなく、すべてのボタンを関連するポップアップにリンクする方法はありますか？または、それぞれのクリックイベントを記述せずに、すべてのボタンとdivを一覧表示する最短の方法はありますか？

$(function() {
  $('.Btn1').click(function(e) {e.preventDefault();
  $('.Pop1').fadeIn();});
  $('.Btn2').click(function(e) {e.preventDefault();
  $('.Pop2').fadeIn();});
  var modalBgd = $('.PopBgd')
  $('.PopClose, .PopBgd').click(function(e) {e.preventDefault();
  modalBgd.fadeOut();});
});
4

2 に答える 2

0

リンク/ボタン/クリック可能な要素がどのように見えるかによって異なります。私は次のようなことをします：これらの要素をすべて選択し、イベントハンドラーをそれらに適用します。 

$(".popup").click(...);

より洗練されたセレクターを使用することもできますが、考え方は常に同じです。要素は複数のクラスを持つことができることに注意してください。

于 2013-02-28T16:01:42.943 に答える
0

次のように、リンクのデータ要素内にポップアップのID/クラスを指定できます。

<a href="#" data-popup=".Pop1" class="openpopup">open popup 1</a>
<a href="#" data-popup=".Pop2" class="openpopup">open popup 2</a>

これにより、JavaScriptが次のようになります。

$('.openpopup').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
});
于 2013-02-28T16:05:08.177 に答える