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

Question

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

更准确地说：

比如我在断点1（800px以上）
我window从断点1调整到断点2（800px以下）。
现在我在断点2（800px以下）
然后我点击next/prev按钮

动画使用断点 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

不善于解释，但基本上：An example of variable shadowing in javascript

乍一看，它应该有效，作用域似乎是正确的等等。我不知道 jQuery 背后是如何做到的：$(".prev").on("click",function(e) {，它是否设置了函数和覆盖听众？或添加一个新的听众？或者什么都不做，已经有一套了。

所以不管怎样，解决它的一种方法是 "re-define" 你的 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;}
  });
});

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

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

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

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

After window resize between 2 breaking points the slide innerWidth() being now used is taken from the breaking point I was resizing from, not into

javascript

jquery

window-resize