Novice Alert: JavaScript challenge!
Right now, I'm working on a complex website project, but for the sake of isolating my issue, I've simplified it down.
The main goal is to have 3 images (represented by colors) appear as the user navigates using previous and next buttons. I can't use third-party plugins; I must stick to this logic due to the complexity of the final site.
I'm having trouble figuring out why my JavaScript code isn't functioning properly. I acknowledge that my code could be more efficient, and I'm open to suggestions in that regard, but I can't seem to pinpoint the mistake. Upon testing, you'll notice that either the previous or next button stops working after the first slide transition.
Any assistance would be greatly appreciated.
$(document).ready(function() {
$('.first').on('click', '.next', function() {
$('body').addClass("second");
$('body').removeClass("third");
$('body').removeClass("first");
event.preventDefault();
})
});
$(document).ready(function() {
$('.first').on('click', '.prev', function() {
$('body').addClass("third");
$('body').removeClass("second");
$('body').removeClass("first");
event.preventDefault();
})
});
$(document).ready(function() {
$('.second').on('click', '.prev', function() {
$('body').removeClass("third");
$('body').addClass("first");
$('body').removeClass("second");
event.preventDefault();
})
});
$(document).ready(function() {
$('.second').on('click', '.next', function() {
$('body').addClass("third");
$('body').removeClass("first");
$('body').removeClass("second");
event.preventDefault();
})
});
$(document).ready(function() {
$('.third').on('click', '.prev', function() {
$('body').removeClass("first");
$('body').addClass("second");
event.preventDefault();
})
});
$(document).ready(function() {
$('.third').on('click', '.next', function() {
$('body').removeClass("second");
$('body').addClass("first");
$('body').removeClass("third");
event.preventDefault();
})
});.first {
background-color: #0ff;
}
.second {
background-color: #000;
}
.third {
background-color: #ff0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="first">
<nav class="slides-navigation">
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>
</nav>
</body>