多个元素的Javascript答案

【问题标题】：Javascript for multiple elements多个元素的Javascript
【发布时间】：2013-02-28 21:48:38
【问题描述】：

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

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

【问题讨论】：

ID 必须是唯一的。您需要更改 id，也许您需要更改 $(this).next('.modal') ..
谢谢.. 效果很好

标签： javascript jquery

【解决方案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>

观察方法：

我在您的每个模态 ID 后面添加了一个数字。
我如何为每个链接添加一个名为“data-id”的属性我们想要的对应数字。
我如何使用 jQuery 出色的 data() 方法来获得它对应的编号。

这种方法的优点是可以将链接移动到需要的任何位置，而无需更改点击事件的内部结构。 Aka 我们不需要通过.next()、.parent()、.find() 等进行 DOM 搜索。

【讨论】：

【解决方案2】：

如前所述，您的 div 中有一个非唯一 ID，因此 $('#modal') 只会选择第一个。

但是，这将选择所有这些：

$("div[id=modal]")

这方面见以下问题：How to select all elements with a particular ID in jQuery?

【讨论】：

【解决方案3】：

识别一组元素时使用的正确属性是class，而不是id，它必须是元素唯一的。应用类名而不是 ID，您的标记将如下所示：

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

由于您正在尝试操作单击按钮之前的模式，因此最好的方法是使用prev 方法来选择按钮之前的元素。

$('.button').click(function (e) {
    $(this).prev('.modal').reveal({
        ...
    });
    return false;
});

【讨论】：