javascript - 无法联系到 div 内的第 n 个孩子 img

Question

我有这个小提琴，我想在默认情况下只显示第一张照片并隐藏其余的，并用每个鼠标滚动更改照片。var i 由 mousescroll 确定，如果 i < 1 或 i > 5，我希望操作中断，因为没有大于 5 或​​小于 1 的第 n 个孩子。

请在你的答案中提供小提琴。谢谢你。

http://jsfiddle.net/a8FGe/6/

$(window).scroll(function(event){
   var i = 0;
   var st = $(this).scrollTop();
   if (st > 0)
   {
       var i += 1;
       if (i > 5)
       {
           return;
       }
       $("img").hide();
       $("img:nth-child(" + i + ")").show();
   }
    else
   {
       var i -= 1;
       if (i < 0)
       {
           return;
       }
       $("img").hide();
       $("img:nth-child(" + i + ")").show();
   }
});

Answer 1

你在寻找这样的东西吗？

http://jsfiddle.net/a8FGe/7/

var i = 1;
$(document).bind('mousewheel', function (e) {

    if (e.originalEvent.wheelDelta < 0) { // scroll down
        if (i + 1 <= 5)
            i++;
        else
            return;

    } else {
        if (i - 1 >= 1)
            i--;
        else
            return;

    }
    //console.log(i);
    $("img").hide();
    $("img:nth-child(" + i + ")").show();
});