javascript - この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;  
        }
}
});
});

Answer 2

ifelseブロックを正規表現btwに置き換えることができます。これにより、コードが短縮および簡素化されます。

var re = new RegExp('images/([0-9]+).jpg');
var m = re.exec($('img.highslide-image').attr('src'));
if (m && m.length > 0) {
    thisImage = m[0];
}