Using one javascript for multiple elements

Question

For popover a division i'm using this code. I want to add multiple elements. When i add multiple elements with same id, the script doesn't work. How it solve? The script is.

<a href="#" id="button">Click me</a>
<div id="modal">
    <div id="heading">
        Are you sure you want to do that?
    </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>

I want to add like this.

<a href="#" id="button">Click me</a>
    <div id="modal">
        <div id="heading">
            Are you sure you want to do that?
        </div>  
    </div>
<a href="#" id="button">Click </a>
    <div id="modal">
        <div id="heading">
            You want to do that?
        </div>  
    </div>

Ids must be unique. Use classes instead. – Bergi Mar 12 '13 at 18:28 — Bergi, Mar 12 '13 at 18:28

Benjamin Gruenbaum · Answer 1 · 2013-03-12T18:36:13.397

1

Ids are unique. The specification only allows for one element per id.

Use a class instead

<div class="toActOn">
        Are you sure you want to do that?
</div>  
<div class="toActOn">
        Really sure
</div>

Then in jQuery change your selector to .toActOn (that is $(".toActOn") )

This explains what ID are according to the W3c

What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id";

edited Mar 12 '13 at 18:36

answered Mar 12 '13 at 18:29

Benjamin Gruenbaum

270,886
87
504
504

It working, but the content of popover exist in the window. How it solve? – Aneesh Mar 12 '13 at 18:36
@Aneesh I'm sorry but I don't understand your request. If you'd like to discuss the topic of classes vs. ids in length, or how to solve another particular problem you're having, I think it goes beyond the scope of this question. You're more than welcome to join me in chat (http://chat.stackoverflow.com/rooms/17/javascript) about it. If you're interested in something related to the same problem this question is about, I'd appreciate it if you could better explain the problem you're having. "popover exist in the window" is hard for me to understand. – Benjamin Gruenbaum Mar 12 '13 at 18:39
@Aneesh If you feel my answer solves your question, please consider accepting it. – Benjamin Gruenbaum Mar 13 '13 at 02:34

Bafsky · Answer 2 · 2013-03-13T14:22:04.677

Use class instead of id to identify the elements...

<a href="#" class="button" modal="m1">Click me</a>
<div id="m1">
    <div id="heading">
        Are you sure you want to do that?
    </div>  
</div>
<a href="#" class="button" modal="m2">Click</a>
<div id="m2">
    <div id="heading">
        Are you sure?
    </div>  
</div>
<a href="#" class="button" modal="m3">Click this</a>
<div id="m3">
    <div id="heading">
        Please confirm
    </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
                        $('#' + $(this).attr('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>

I tried this code and works fine, but on both button click show same content. The code like this Click me

Are you sure you want to do that?

Thanks

hai; — Aneesh, Mar 12 '13 at 18:40
I'm not sure what you mean. You want different content to show for each button? — Bafsky, Mar 12 '13 at 18:53
Ok, I've modified my answer to allow for different content for each button. — Bafsky, Mar 13 '13 at 14:27

Using one javascript for multiple elements

2 Answers2