如果(或者可能是hasClass)被忽略- javascript
通过检查CodePen版本，您可能会更好地理解这一点。
直截了当地说，问题是:当你进入第二或第三“幻灯片”(红色或蓝色的颜色)，然后试图调整你的窗口大小，它的内部将变成灰黑色。这不应该发生的。
黑色~灰色的含量必须保持在黑色~灰色的“幻灯片”内，红色的在红色的，蓝色的在蓝色的。
我正在制作一个符合这个逻辑的网站，但是有图像。我使用这个代码来简化代码，因为我的代码非常复杂，而且有大量不必要的代码。
我相信问题出在if($('body').hasClass('first')){if$(window).resize(function...等等，因为如果您调整窗口的大小，则if似乎会被忽略，因为“眼镜”div总是灰色/黑色的。
因为我是Javascript的初学者，所以我看不出有什么问题，事实上，我只是不明白为什么像if这样简单的东西不能工作。
任何帮助都是非常感谢的。谢谢!
var nums = ['first', 'second', 'third'];
var curr = 0;
$('.next, .prev').on('click', function(e) {
var offset = $(this).hasClass('prev') ? nums.length - 1 : 1;
curr = (curr + offset) % nums.length;
$('body').removeClass();
$('body').addClass(nums[curr]);
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
event.preventDefault();
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
event.preventDefault();
} else {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#f00");
} else {
$("#glasses").css("background", "#6ff");
}
event.preventDefault();
};
})
if ($('body').hasClass('first')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
})
} else if ($('body').hasClass('second')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
})
} else if ($('body').hasClass('third')) {
$(window).resize(function() {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
})
}.slides-navigation a{
top: 50%;
position: fixed;
}
.prev{
left:30px;
position:absolute;
}
.next{
right: 45px;
position:absolute;
}
#glasses{
width: 50%;
height: 450px;
margin: 0 auto;
background: #000;
background-repeat: no-repeat;
background-position: 42% 86%;
}
.first{
border: #000 16px solid;
}
.second{
border: #00f 16px solid;
}
.third{
border: #f00 16px solid;
}
@media screen and (max-width:1367px){
.first{
border: #666 16px solid;
}
.second{
border: #66f 16px solid;
}
.third{
border: #6ff 16px solid;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body class="first">
<div id="glasses"></div>
<nav class="slides-navigation desktop">
<a href="#" class="prev">Prev></a>
<a href="#" class="next">Next</a>
</nav>
</body>
回答 2
Stack Overflow用户
发布于 2016-01-13 21:23:19
如果我正确理解这个问题，问题的核心是$(window).resize函数在if语句中，而不是反过来。
它应该更像这样：
$(window).resize(function() {
if ($('body').hasClass('first')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#000");
} else {
$("#glasses").css("background", "#666");
}
} else if ($('body').hasClass('second')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "#00f");
} else {
$("#glasses").css("background", "#66f");
}
} else if ($('body').hasClass('third')) {
if ($(window).width() >= 1367) {
$("#glasses").css("background", "f00");
} else {
$("#glasses").css("background", "6ff");
}
}
});否则，您的代码只检查主体类一次，只为该类应用调整大小函数，并且永远不知道再次检查。
Stack Overflow用户
发布于 2016-01-13 21:25:55
你的if语句
if ($('body').hasClass仅在页面加载时运行一次。
您应该将其移到下一个/prev事件处理程序中，以便每次都重新计算调整大小的事件。
https://stackoverflow.com/questions/34777090
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号