背景没有发生应有的变化-Jquery / Javascript / CSS
[英]Background isn't changing as it should - Jquery/Javascript/CSS
问题描述
Javascript noob alert! 
JavaScript noob警告！
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. 基本上，它将有3张图像（用颜色表示），当用户按上一个和下一个时应显示。 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. 我不明白为什么我的JS无法使用。 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 个解决方案
解决方案1
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>
解决方案2
1 已采纳 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. 代码无法按预期运行的原因是因为您绑定了这6个事件侦听器，但是在代码运行时3个元素中只有1个存在。 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. 要使其正常工作，您需要首先选择不可更改的父元素，并且在您的情况下，这将是html元素或文档，因为您要更改主体类。 So, something like: 因此，类似：
$(document)...
instead of: 代替：
$('body')...
解决方案3
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 只需将类添加到数组classArr
in javascript 在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/ 参见js小提琴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>
解决方案4
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.