Question

我对jQuery很陌生，希望能从你们那里找到一些帮助。我设法创建了一些与动态构建内容一起使用的滚动功能。

我有几个我想要的DIV＆＃34; scrollTo＆＃34;。这些Div是总是像视口一样大。一切正常，直到我调整窗口大小。在窗口调整大小 resizeDiv和setScrollingPoints再次被触发。现在是动画转到旧坐标，然后慢慢滚动到正确的位置。

我发现，resize函数被多次调用，因此setScrollingPoints函数也会多次触发。我不明白为什么旧职位不会被覆盖。也许你可以帮助我...

很多！丹

我的代码看起来像这样：

 function resizeDiv(target) {

      // resizing Divs
      var viewportHeight = $(window).height();
      var viewportWidth = $(window).width();

      $(target).height(viewportHeight).width(viewportWidth);

 } // end resize Divs


 function setScrollingPoints() {
      var wallpapers = $('.wallpaper');
      var buttons = $('.button');

      var scrollPositions = new Array();

      // Cache Wallpaper positions
      wallpapers.each(function(i) {
           scrollPositions[i] = Math.round($(this).offset().top);
       $(this).addClass('wallpaper'+ i);
      });


      // setting next Buttons
      buttons.each(function(i) {
           $(this).attr('id','button'+i);
      if(i == wallpapers.length - 1) {
           $(this).remove();
      }

 });

  $('.nextButton').click(function() {

    // get button id
    var elementID = $(this).attr('id');

    // remove alpha characters from id and convert it to a numeric var
    elementID = parseInt(elementID.replace(/\D/g,''));

    var next = elementID + 1;
    var previous = elementID -1;

    var nextWallpaper = '.wallpaper' + next;
    var previousWallpaper = '.wallpaper' + previous;


    if(!(next == wallpapers.length)) {
        $('html, body').scrollTo(scrollPositions[elementID+1]);
    });


  });

  $(window).resize(function() {

          resizeDiv('.wallpaper');
          setScrollingPoints();

  });



$(document).ready(function() {

// resize all wallpaper elements to viewport size
resizeDiv('.wallpaper');

// set scrollingPositions
setScrollingPoints();

});

Answer 1

在setScrollingPoints中，更改：

var scrollPositions = new Array();

到

scrollPositions = new Array();

如果你从你引用的scrollPositions的infront中获取var关键字，你将讨论全局范围scrollPositions，你的任何函数都可以访问它。

不同的问题：

你有

$(this).addClass('wallpaper'+ i);

在setScrollingPoints中。你没有删除以前的课程。

最终问题

只是看着你的JSfiddle（谢谢你为我制作）。

你的问题不在你的阵列中。在setScrollingPoints()内，您需要设置点击监听器：

$('.nextButton').click(function() {

此不会覆盖之前的侦听器，只会添加另一个侦听器。你需要添加这个：

$('.nextButton').off("click");

以上$('.nextButton').click(function() {

你只是在每个按钮上触发所有旧听众。

jquery在窗口大小调整时为vars分配新值

1 个答案: