用于多个元素的 Javascript

Question

我想在不同的按钮点击时弹出不同的表单。我正在为此使用此代码。但所有按钮点击显示第一个内容形式。它是怎么解决的？代码

<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>

Answer 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()、.find() 等进行 DOM 搜索。