thomagron thomagron - 3 months ago 8
CSS Question

calling javascript inside a div

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

Joe Joe
Answer

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() { ... });