在两个断点之间调整窗口大小后，现在使用的幻灯片innerWidth（）是从我调整大小的断点处获取的，而不是

Question

为什么在两个断点之间调整窗口大小后，现在使用的幻灯片innerWidth（）是从我正在调整大小的断点中获取的，而不是从中获取的？

更准确地说：

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

1. 举例来说，我要突破1点（800px以上）

2. 我会从断点1到断点2（小于800像素）调整窗口大小。

3. 现在我要突破点2（低于800像素）

4. 然后，我单击下一步/上一步按钮

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

    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) { ，它设置了函数并覆盖了侦听器？还是添加了新的侦听器？或者什么都不做，已经有了一套。

因此，无论如何，一种解决方法是在click函数中“重新定义”一个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页，并重新调整大小..一切都会再次起作用\\ _（ツ）_ /