在 2 个中断点之间调整窗口大小后，现在使用的幻灯片 innerWidth() 是从我调整大小的中断点获取的，而不是进入

Question

为什么在 2 个断点之间调整窗口大小后，现在使用的幻灯片 innerWidth(( 取自我正在调整大小的断点 从，不进入？

更准确地说：

https://jsfiddle.net/ecm3d30z/1/

1. 例如，我处于突破点 1(800 像素以上(

2. 我从断点 1 到断点 2(低于 800px(进行窗口大小调整。

3. 现在我处于突破点 2(低于 800px(

4. 然后我点击下一个/上一个按钮

5. 动画使用从断点 1 开始的单滑块宽度，而应使用从点 2 开始的单滑块宽度。

   app = {
   hubert:function() {
   var num = $(".testimonial").length;
   var oneslidewidth = $(".testimonial").innerWidth();
   var oneslideheight = $(".testimonial").innerHeight();
   var fullsliderwidth = num * oneslidewidth;        
   var active = false;
   
   $("section").css({
   width: oneslidewidth,
   height: oneslideheight
   });
   $(".calosc").css({
   width: fullsliderwidth
   }); 
   
   function changehook(direction) {
   var slide = parseInt($(".calosc").data("slide") );
   if (direction == "next") {
   slide++
   $(".calosc").data("slide", slide);
   } else if (direction == "prev") {
   slide--
   $(".calosc").data("slide", slide);
   }
   }
   
   $('.next').click(function(e) {
   e.preventDefault();
   if(active || parseInt($(".calosc").data("slide")) + 1 > num) {
   return;
   }
   changehook("next");
   active = true;
   $(".calosc").animate({'left' : $(".calosc").position().left-oneslidewidth},500, function() {
   {active = false;} });
   });
   
   $(".prev").on("click",function(e) {
   e.preventDefault();
   if(active || parseInt($(".calosc").data("slide")) - 1 < 1 ) {
   return;
   }
   changehook("prev");
   active = true;
   $(".calosc").animate({'left': $(".calosc").position().left+oneslidewidth},500, function() {
   { active = false; } });
   });
   }
   }
   

Answer 1

不擅长解释，但基本上： JavaScript 中变量阴影的示例

乍一看，它应该有效，范围似乎是正确的等等。我不知道jQuery是如何做到这一点的：$(".prev").on("click",function(e) {，它是否设置了函数并覆盖了侦听器？还是添加新侦听器？或者什么都不做，已经有一套了。

所以无论如何，修复它的一种方法是在点击功能中"重新定义"您的oneslidewidth，如下所示：

$('.next').click(function(e) {
// Here /
var oneslidewidth = $(".testimonial").innerWidth();
e.preventDefault();
if(active || parseInt($(".calosc").data("slide")) + 1 > num) {
return;
}
changehook("next");
active = true;
$(".calosc").animate({'left' : $(".calosc").position().left-oneslidewidth},500, function() {
{active = false;}
});
});

另一种方法是将"数据"包装到一个对象中，或者使它们全局化。这是将变量放入对象的更新版本。

https://jsfiddle.net/ecm3d30z/2/

顺便说一句，还有另一个错误：更改为2+页面，并调整大小..它只是中断..，但是如果您将其更改回第1页，并调整大小..一切再次̄\_(ツ)_/̄正常工作