November 9, 201213 yr How can I get each different button on same page to perform individual event? <!DOCTYPE html> <html> <head> <!-- JQuery include file --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!-- Hides all <p> tags --> <script> $(document).ready(function() { $("button").click(function() { $("p.hide").hide(); }); }); </script> <!-- Hides the DIV --> <script> $(document).ready(function() { $("button").attr("test").click(function() { $("#box").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph</p> <p class="hide">This is another paragraph</p> <button>Click Me</button> <br> <br> <h2>Hide DIV Example</h2> <div id="box" style="width: 300px; height: 200px; border: solid 1px green;"> <p>This div will hide when the button outside the div is clicked. Try it</p> </div> <button name="test">Hide DIV</button> </body> </html>
November 9, 201213 yr You could give each button a unique ID and reference them through the jQuery like this: $('#button1').click(function() { //do something }); $('#button2').click(function() { //do something }); <button id="button1"> Click Me </button> <button id="button2"> Click Me </button>
November 9, 201213 yr excellent thanks, just started jquery today. enjoying thus far No worries. If you wan't multiple buttons to do the same thing, you could use a class instead e.g. $('.mybutton').click(function() { //do something }); <button class="mybutton"> Click Me </button> <button class="mybutton"> Click Me </button>
Create an account or sign in to comment