多个元素的Javascript [英] Javascript for multiple elements

问题描述

我想在不同的按钮单击上弹出不同的表单.我为此使用此代码.但所有按钮单击都会显示第一个内容表单.如何解决? 代码

I want to pop over different forms on different button click. I'm using this code for that. but all button click shows first content form. How it solve? Code

<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.它只会给你第一个.

You are using a non-unique id. It will only ever give you the first one.

<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()方法来获取 相应的号码.

1. I added a number behind each of your modal id's.
2. How I added an attribute called "data-id" to each link with the corresponding number we want.
3. How I used jQuery's wonderful data() method to get that corresponding number.

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

The advantage of this method is that the links can be moved to wherever they need to be without needing to change the internals of the click event. Aka we do not need to do DOM searching via .next(), .parent(), .find() etc.

这篇关于多个元素的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！