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>

观察者如何：

我在每个模态ID后面加了一个数字。
我如何向每个链接添加一个名为“data-id”的属性我们想要的相应数字。
我是如何使用jQuery的精彩数据（）方法来实现的相应的号码。

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

Answer 2

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

然而，这将选择所有这些：

$("div[id=modal]")

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

Answer 3

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

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

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

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

多个元素的Javascript

3 个答案: