Andrea Santana Andrea Santana - 4 years ago 87
Javascript Question

Background isn't changing as it should - Jquery/Javascript/CSS

Javascript noob alert!

I have to make a bit of a complicated site right now, but I simplified it to focus in my problem.

Check Codepen

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>




Answer Source

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) {
  curr = (curr + ($(this).hasClass('prev') ? 2 : 1)) % 3;
  $('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')...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download