このjQueryコードがFirefoxでのみ機能するのはなぜですか？
https://stackoverflow.com/questions/1446071
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ライトボックスでフルサイズになった画像間で前後にスクロールできるコードがあります。キーが押されたときに画像のソースを置き換えるだけです。 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;
});
解決
ブラウザ間で使用されるさまざまなイベントモデルに関係しています。
この行：
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;
}
}
});
});
他のヒント
if elseブロックを正規表現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];
}
所属していません StackOverflow
