为什么会这样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;
和键代码属性不是跨浏览器兼容。
由于看来你是使用jQuery，为什么不使用自己的按键事件像这样：
$(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;
}
}
});
});
其他提示
您可以取代你，如果有一个正则表达式else块顺便说一句，它会缩短并简化你的代码
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
