Question

You may understand this better by checking the CodePen version.

直截了当地说，问题是：当你去第二个或第三个＆＃34;滑动＆＃34; （偏红或偏蓝的颜色），然后尝试调整窗口大小，其内部将变为灰色〜黑色。这不应该发生。

黑色〜灰色内容必须保持在黑色〜灰色＆＃34;滑动＆＃34;，红色为红色，蓝色为蓝色。

我制作的网站遵循这种逻辑，但带有图像。因为我的代码非常复杂并且有大量不必要的代码，所以我使这个代码集简化了。

我认为问题出在if（$（＆＃39; body＆＃39;）。hasClass（＆＃39; first＆＃39;））{if $（window）.resize（function ... etc ;因为if似乎被忽略了，因为如果调整窗口大小，#glasses div总是灰色/黑色。

因为我是Javascript的初学者，所以我没有看到任何错误，事实上我只是无法理解为什么像if一样简单的工作。

感谢任何帮助。谢谢！

＆＃13;

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");
    }
  })
}

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

如果我正确理解了这个问题，问题就围绕$(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");
      }
  }
});

否则你的代码会检查一次正文的类，只对该类应用resize函数，并且永远不知道再次检查。

Answer 2

你的if语句

if ($('body').hasClass

仅在页面加载时运行一次。

您应该将其移动到next / prev事件处理程序中，因此每次都会重新计算resize事件。

如果（或者可能是hasClass）被忽略 - javascript

2 个答案: