Question

我正在建立一个使用Flickety滑块的网站（如果您不熟悉，请链接：https://flickity.metafizzy.co/），并且只需要显示UI（底部的左右箭头+ 4个页面点）即可当由变量决定时。

我从'alert（）'获得了反馈，因为我正在同一函数中更新currentSlide，这令人困惑。 currentSlide始终读取1，因此无论出于何种原因，它都不会更新。

我为任何想看的人整理了一个Codepen： https://codepen.io/DropDeadDove/pen/JVZzWj

$(document).ready(function(){

      var currentSlide = 1;

      $(".next").click(function() {
          currentSlide++;
      });

      $(".previous").click(function() {
          currentSlide--;
      });

      $("ol.flickity-page-dots li:nth-of-type(1)").click(function() {
          currentSlide = 1;
          // alert("1");
      });

      $("ol.flickity-page-dots li:nth-of-type(2)").click(function() {
          currentSlide = 2;
          // alert("2");
      });

      $("ol.flickity-page-dots li:nth-of-type(3)").click(function() {
          currentSlide = 3;
          // alert("3");
      });

      console.log(currentSlide)

});

我正在尝试让currentSlide匹配我正在播放的任何幻灯片。

即当我单击“下一步”时，它应该添加到currentSlide。当我单击点3时，currentSlide应该为3 等

已编辑以显示封闭的事件处理程序

Answer 1

您必须将代码放入这样的文档事件处理程序中：

$(document).ready(function() {
    var currentSlide = 1;

    $(".next").click(function() {
        currentSlide++;
        console.log(currentSlide);
    });

    $(".previous").click(function() {
        currentSlide--;
        console.log(currentSlide);
    });

    $("ol.flickity-page-dots li:nth-of-type(1)").click(function() {
        currentSlide = 1;
        console.log(currentSlide);
        // alert("1");
    });

    $("ol.flickity-page-dots li:nth-of-type(2)").click(function() {
        currentSlide = 2;
        console.log(currentSlide);
        // alert("2");
    });

    $("ol.flickity-page-dots li:nth-of-type(3)").click(function() {
        currentSlide = 3;
        console.log(currentSlide);
        // alert("3");
    });
});

Flickety滑块，为什么我的变量没有更新？

1 个答案: