2

ボタンのクリックごとに異なるフォームをポップしたい。そのためにこのコードを使用しています。ただし、すべてのボタンをクリックすると、最初のコンテンツフォームが表示されます。どのように解決しますか？コード

<a href="#" class="button">Click 1</a>
<div id="modal">
    <div id="heading">Content form 1</div>  
</div>
<a href="#" class="button">Click 2</a>
<div id="modal">
    <div id="heading">Content form 2</div>  
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>

<script type="text/javascript">
$(document).ready(function () {
  $('.button').click(function (e) {  // Button which will activate our modal
    $('#modal').reveal({             // The item which will be opened with reveal
      animation: 'fade',             // fade, fadeAndPop, none
      animationspeed: 600,           // how fast animtions are
      closeonbackgroundclick: true,  // if you click background will modal close?
      dismissmodalclass: 'close'     // the class of a button or element that will close an open modal
    });
    return false;
  });
});
</script>
4

3 に答える 3

1

一意でないIDを使用しています。それはあなたに最初のものだけを与えるでしょう。

<a href="#" class="button" data-modal="1">Click 1</a>
<div id="modal">
    <div id="heading">Content form 1</div>  
</div>
<a href="#" class="button" data-modal="2">Click 2</a>
<div id="modal">
    <div id="heading">Content form 2</div>  
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>

<script type="text/javascript">
$(document).ready(function () {
  $('.button').click(function (e) {  // Button which will activate our modal
    $('#modal' + $(this).data('id')).reveal({             // The item which will be opened with reveal
      animation: 'fade',             // fade, fadeAndPop, none
      animationspeed: 600,           // how fast animtions are
      closeonbackgroundclick: true,  // if you click background will modal close?
      dismissmodalclass: 'close'     // the class of a button or element that will close an open modal
    });
    return false;
  });
});
</script>

オブザーバーの方法：

  1. 各モーダルIDの後ろに番号を追加しました。
  2. 「data-id」という属性を、必要な対応する番号を持つ各リンクに追加する方法。
  3. jQueryのすばらしいdata（）メソッドを使用して、対応する数値を取得する方法。

この方法の利点は、クリックイベントの内部を変更することなく、リンクを必要な場所に移動できることです。.next()別名、、.parent()などを介してDOM検索を行う必要はありません.find()。

于 2013-03-13T04:45:44.487 に答える
0

示されているように、div には一意でない ID があるため$('#modal')、最初の ID のみが選択されます。

ただし、これによりすべてが選択されます。

$("div[id=modal]")

これに関しては、次の質問を参照してください: jQuery で特定の ID を持つすべての要素を選択する方法は?

于 2013-03-13T05:04:20.150 に答える
0

要素のグループを識別するときに使用する正しい属性はclassではなくidであり、要素に一意である必要があります。ID の代わりにクラス名を適用すると、マークアップは次のようになります。

<div class="modal">
    ...
</div>

クリックされたボタンの前にあるモーダルを操作しようとしているので、prevメソッドを使用してボタンの直前の要素を選択するのが最善の方法です。

$('.button').click(function (e) {
    $(this).prev('.modal').reveal({
        ...
    });
    return false;
});
于 2013-03-13T05:41:36.430 に答える