为什么这个jQuery代码只能在Firefox中运行？

Question

我有一些代码,允许您在灯箱中的全尺寸图像之间来回滚动.它只是在按下键时替换图像的来源.它在Firefox中完美运行,但在IE,Chrome和Safari(我测试过的唯一其他浏览器)中似乎没有做任何事情.

任何帮助将不胜感激!

$(document).ready(function() {

var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;

function handleArrowKeys(evt) {
  switch (evt.keyCode) {
    case 37:
      $(function() {
        if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
        thisImage = 1;
        } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
        thisImage = 2;
        } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
        thisImage = 3;
        } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
        thisImage = 4;
        } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
        thisImage = 5;
        } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
        thisImage = 6;
        } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
        thisImage = 7;
        } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
        thisImage = 8;
        } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
        thisImage = 9;
        } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
        thisImage = 10;
        } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
        thisImage = 11;
        } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
        thisImage = 12;
        } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
        thisImage = 13;
        }
      });
      $(function() {
        if (thisImage == 1) {
          thisImage = 1;
          } else {
          thisImage--;
        }

      });

      $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

      var theTitle = $('div#myImageFlow_caption').text();

      $('div.highslide-caption').html(theTitle);

      break;       
    case 39:
      $(function() {
        if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
        thisImage = 1;
        } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
        thisImage = 2;
        } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
        thisImage = 3;
        } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
        thisImage = 4;
        } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
        thisImage = 5;
        } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
        thisImage = 6;
        } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
        thisImage = 7;
        } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
        thisImage = 8;
        } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
        thisImage = 9;
        } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
        thisImage = 10;
        } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
        thisImage = 11;
        } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
        thisImage = 12;
        } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
        thisImage = 13;
        }
      });
      $(function() {
        if (thisImage == maxImage) {
          // Do Nothing....
          } else {
          thisImage++;
        }
      });

      $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

      var theTitle = $('div#myImageFlow_caption').text();

      $('div.highslide-caption').html(theTitle);
      break;  
  }
}

document.onkeypress = handleArrowKeys;

});

Answer 1

它与浏览器之间使用的不同事件模型有关.

这一行:

document.onkeypress = handleArrowKeys;

并且keyCode属性不是跨浏览器兼容的.

由于您似乎正在使用jQuery,为什么不使用它们的keypress事件:

$(document).ready(function() {

var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;

    $("body").keypress(function(evt) {
        switch (evt.which) {
                case 37:
                        $(function() {
                                if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
                                thisImage = 1;
                                } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
                                thisImage = 2;
                                } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
                                thisImage = 3;
                                } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
                                thisImage = 4;
                                } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
                                thisImage = 5;
                                } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
                                thisImage = 6;
                                } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
                                thisImage = 7;
                                } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
                                thisImage = 8;
                                } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
                                thisImage = 9;
                                } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
                                thisImage = 10;
                                } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
                                thisImage = 11;
                                } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
                                thisImage = 12;
                                } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
                                thisImage = 13;
                                }
                        });
                        $(function() {
                                if (thisImage == 1) {
                                        thisImage = 1;
                                        } else {
                                        thisImage--;
                                }

                        });

                        $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

                        var theTitle = $('div#myImageFlow_caption').text();

                        $('div.highslide-caption').html(theTitle);

                        break;       
                case 39:
                        $(function() {
                                if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
                                thisImage = 1;
                                } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
                                thisImage = 2;
                                } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
                                thisImage = 3;
                                } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
                                thisImage = 4;
                                } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
                                thisImage = 5;
                                } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
                                thisImage = 6;
                                } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
                                thisImage = 7;
                                } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
                                thisImage = 8;
                                } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
                                thisImage = 9;
                                } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
                                thisImage = 10;
                                } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
                                thisImage = 11;
                                } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
                                thisImage = 12;
                                } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
                                thisImage = 13;
                                }
                        });
                        $(function() {
                                if (thisImage == maxImage) {
                                        // Do Nothing....
                                        } else {
                                        thisImage++;
                                }
                        });

                        $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

                        var theTitle = $('div#myImageFlow_caption').text();

                        $('div.highslide-caption').html(theTitle);
                        break;  
        }
}
});
});