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();
});