Background isn't changing as it should - Jquery/Javascript/CSS
Question
Javascript noob alert!
I have to make a bit of a complicated site right now, but I simplified it to focus in my problem.
Basically, it's gonna have 3 images (represented by the colors) that should appear as the user presses prev and next. I can't use 3rd party slides, I need to follow this logic for, as I stated previously, the final site is quite complicated.
I don't understand why my JS doesn't work. I do think it's inneficient and I could write better than that (and I'll accept tips regarding this), but I don't see the mistake. If you browse just a little, you'll see that either the prev or the next button stop working after the 1st slide.
Any help is 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>
4 answers
solution1
3 2015-12-28 17:58:11
Check this hope it will helpful to you.
$(document).ready(function() { $(document).on('click', 'body.first .next', function() { event.preventDefault(); $('body').addClass("second"); $('body').removeClass("third"); $('body').removeClass("first"); }) $(document).on('click', 'body.first .prev', function() { event.preventDefault(); $('body').addClass("third"); $('body').removeClass("second"); $('body').removeClass("first"); }) $(document).on('click', 'body.second .prev', function() { event.preventDefault(); $('body').removeClass("third"); $('body').addClass("first"); $('body').removeClass("second"); }) $(document).on('click', 'body.second .next', function() { event.preventDefault(); $('body').addClass("third"); $('body').removeClass("first"); $('body').removeClass("second"); }) $(document).on('click', 'body.third .prev', function() { event.preventDefault(); $('body').removeClass("first"); $('body').addClass("second"); }) $(document).on('click', 'body.third .next', function() { event.preventDefault(); $('body').removeClass("second"); $('body').addClass("first"); $('body').removeClass("third"); }) });
.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>
solution2
1 ACCPTED 2015-12-28 17:58:01
There's really no need to complicate your life with such code for something so simple.
var nums = ['first', 'second', 'third']; var curr = 0; $('.next, .prev').on('click', function(e) { // check which button is clicked and modify the curr value according to it var offset = $(this).hasClass('prev') ? nums.length - 1 : 1; curr = (curr + offset) % nums.length; // avoid being out of index $('body').removeClass(); $('body').addClass(nums[curr]); })
.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>
The reason your code wasn't working as expected is because you bind those 6 event listeners, but only 1 of the 3 elements exist at the time the code runs. You were using the delegated listeners, but not in the proper way. To make it work, you'd need to first select the non-changeable parent element and in your case that would be a html element or the document since you're changing the body classes. So, something like:
$(document)...
instead of:
$('body')...
solution3
0 2015-12-28 18:04:33
try this, you can accommodate any number of classes with this code. Just add class to the array classArr
in javascript
$(document).ready(function() {
var counter = 0;
var classArr = ["first", "second", "third"];
$('body').on('click', '.next, .prev', function(event) {
$(this).hasClass("next") ? counter++ : counter--;
changeClass();
event.preventDefault();
});
function changeClass(){
var indexClass = counter % classArr.length;
indexClass = Math.abs(indexClass);
$.each(classArr, function(index, value) {
if (index == indexClass) {
$('body').addClass(classArr[index]);
} else {
$('body').removeClass(classArr[index]);
}
});
}
});
see the js fiddle https://jsfiddle.net/95hwwt8u/2/
$(document).ready(function() { var counter = 0; var classArr = ["first", "second", "third"]; $('body').on('click', '.next, .prev', function(event) { $(this).hasClass("next") ? counter++ : counter--; changeClass(); event.preventDefault(); }); function changeClass(){ var indexClass = counter % classArr.length; indexClass = Math.abs(indexClass); $.each(classArr, function(index, value) { if (index == indexClass) { $('body').addClass(classArr[index]); } else { $('body').removeClass(classArr[index]); } }); } });
.first{ background-color:#0ff; background-position: center -47px } .second{ background-color:#000; background-position: center -47px } .third{ background-color:#ff0; background-position: center -47px }
<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>
solution4
0 2015-12-28 18:20:10
$(function() { $('#slide').on('click','.next',function(){ if($('body').hasClass("first")){ $('body').removeClass("first"); $('body').addClass("second"); event.preventDefault(); } else if($('body').hasClass("second")){ $('body').removeClass("second"); $('body').addClass("third"); event.preventDefault(); } else if($('body').hasClass("third")){ $('body').removeClass("third"); $('body').addClass("first"); event.preventDefault(); } }); $('#slide').on('click','.prev',function(){ if($('body').hasClass("first")){ $('body').removeClass("first"); $('body').addClass("third"); event.preventDefault(); } else if($('body').hasClass("second")){ $('body').removeClass("second"); $('body').addClass("first"); event.preventDefault(); } else if($('body').hasClass("third")){ $('body').removeClass("third"); $('body').addClass("second"); 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 id='slide' class="first"> <nav class="slides-navigation"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </nav> </body>
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.
Related Question
Javascript isn't changing HTML background image
Javascript function isn't changing the name attribute of an html document as it should
Changing css background with javascript
Why isn't this changing the background?
Background image isn't changing
jQuery's .css isn't adding background attribute to body
CSS class isn't changing
changing css background image in collapsible div using javascript/jQuery
Why isn't my jQuery for changing the background color of my div with animation changing?
Changing CSS background dynamically with jQuery
Related Tags