event handling - Jquery click button change text, attributes etc, then rest back to original -
i'm using click event on button alter things image, h1 text etc. when click button 1 time again want alter how page looked originally. how this? here relevant code far:
<script> $(document).ready(function() { $("button").click(function() { $("h1").text("heading 2"); $("p").text("blah blah blah"); $("#picture").attr({ src: "../img/img2.jpg", title: "a new image", alt: "descriptive picture"}); $("button").text("change back"); }); }); </script> <body> <h1>heading 2</h1> <img src="../img/img1.jpg" alt="basic picture" id="picture"> <p>blah blah blah</p> <button>next</button> </body>
try fiddle class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h1>heading 2</h1> <img src="http://home.iitk.ac.in/~amitkum/images/4.jpg" alt="basic picture" id="picture" height="100"> <p>blah blah blah</p> <button>next</button> </body> <script> var img = 'http://home.iitk.ac.in/~amitkum/dp.jpg'; $(document).ready(function() { $("button").click(function() { tmp = $('#picture').attr('src'); $("h1").text("heading 2"); $("p").text("blah blah blah"); $("#picture").attr({ src: img, title: "a new image", alt: "descriptive picture" }); img = tmp; $("button").text("change back"); }); }); </script>
jquery event-handling click
No comments:
Post a Comment