CODEWITHSUNDEEP
javascriptjquery
Aneesh
Aneesh

Reputation: 183

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>

Upvotes: 2

Views: 170

Answers (3)

user1726343
user1726343

Reputation:

The correct attribute to use when identifying a group of elements is class, not id, which must be unique to an element. Applying class names instead of IDs, your markup would look like:

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

Since you are trying to manipulate the modal that precedes the clicked button, the best approach is to use the prev method to select the element immediately preceding the button.

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

Upvotes: 0

mydoghasworms
mydoghasworms

Reputation: 18591

As indicated, you have a non-unique ID in your divs, so $('#modal') will only select the first one.

However, this will select all of them:

$("div[id=modal]")

See the following question in this regard: How to select all elements with a particular ID in jQuery?

Upvotes: 0

Joe Mills
Joe Mills

Reputation: 1619

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>

Observer how:

  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.

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.

Upvotes: 1

Related Questions