迭代给定类的元素列表并检查可见性?

时间:2014-05-09 19:42:26

标签: javascript jquery html css

当用户使用滚轮滚动时,我一直试图让div上下滑动。出于某种原因,要么保持放置的一个div完全消失,要么滚动事件仅适用于第三个div。我真的很困惑,因为我尝试调试的次数越多,我越是偶然发现另一个故障,我不确定它是不是我的代码还是魔法鼠标滚动&#34 ;轮"这导致了问题。

我有类<div class="slider">...列出的div我有一个循环遍历类滑块的div并返回第一个可见的div的方法,或者返回第三个:

function getCurrentSlider(){

  $(".slider").each(function() {
    if ($(this).is(":visible")) {
      return $(".slider");
    }
  });
  return $("#slideThree");
}

然后由slideItUp()函数调用它,它告诉getCurrentSlider()的div向上滑动到窗口的顶部。

function slideItUp(){                //for when I slide the scroll wheel DOWN the div goes UP
  currentSlider = getCurrentSlider(); 
  currentSlider.slideUp(800);
}

slideItDown()基本上做同样的事情,但它试图向上移动对象链,因为getCurrentSlider()所指向的最后一个将是第三个,如果没有别的是可见。这是代码:

function slideItDown(){ //for when I slide the scroll wheel UP the div goes DOWN
  currentSlider = getCurrentSlider();

  if (currentSlider.is(":visible")) {        //if the slider is currently visible...
    currentSlider = $(this).prev(".slider"); //get the slider before it and...
    currentSlider.slideDown(800);            //slide that one down.

  } else {                       //if the current slider is invisible...
    currentSlider.slideDown(800);//slide it down
  }
}

以下是我用来聆听鼠标滚轮移动的方法:

$(window).bind('mousewheel', function(e){ //correctly grabs scroll events
    if(e.originalEvent.wheelDelta > 0)
    {
        slideItDown();
    }
    else
    {
        slideItUp();
    }
});

这是我的代码的小提琴:http://jsfiddle.net/jdktN/

我是JavaScript和JQuery的初学者。谢谢你的帮助。

0 个答案:

没有答案