calling javascript inside a div
Question
here is my code:
$(document).ready(function(){ $('#next').click(function() { $('.current').removeClass('current').hide() .next().show().addClass('current'); if ($('.current').hasClass('last')) { $('#next').attr('disabled', true); } $('#prev').attr('disabled', null); }); $('#prev').click(function() { $('.current').removeClass('current').hide() .prev().show().addClass('current'); if ($('.current').hasClass('first')) { $('#prev').attr('disabled', true); } $('#next').attr('disabled', null); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <title>javascript problem</title> </head> <body> <div id='div1' class="first current"> <p> here the content of div 1 </p> </div> <div id='div2'> <p> here the content of div 2 </p> </div> //then another 9 divs <div id='div12' class="last"> <input type="submit" value="submit" onclick="submit()"> </div> <div class="buttons"> <button id="prev" disabled="disabled">Prev</button> <button id="next">Next</button> </div> </body> </html>
what i want to do is have the buttons (in the div 'buttons') in every div and not below. because i want them not to show up at the end, and i want to change the value of it on the first page. but when i do this, they dont work anymore.
the codesnippet does not work but what it does is, when you click 'next' the next div will be shown.
here is how i want it:
<div id='div1' class='first current'>
<p>here the content of div 1</p>
<button id="next">Start</button>
</div>
hope its clear
1 answers
solution1
3 ACCPTED 2016-09-07 14:41:25
The id attribute in HTML should always be unique. Instead of using the same id on all your next/prev buttons, you should use a class instead. You can then bind the click event using the class instead and it will apply to all the elements with that class .
<button class="next">Start</button>
$('.next').click(function() { ... });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.