javascript在IE 9和Firefox中均不起作用
[英]javascript not working in I.E. 9 as well as Firefox
问题描述
Greetings fellow stackoverflow members, 
问候stackoverflow成员，
I am having quite the dilemma as of late. 到现在为止，我一直处于两难境地。 The code provided below is quite lengthy, however, most of it is duplicate code for each 3 main containers labeled (General, Kills, and Scores). 下面提供的代码很长，但是，大多数代码是每个标记有3个主要容器（一般，击杀和得分）的重复代码。
I am having issues with the javascript I have written up which coincides with jquery 1.9.1 - the slider doesn't slide - it works perfectly in Chrome, but doesn't in IE9 as well as Firefox for some reason...I've revised it all countless of times, but do not see any issues as to why it's not working in those browsers. 我在写与jQuery 1.9.1一致的JavaScript时遇到了问题-滑块不滑动-在Chrome中效果很好，但由于某些原因在IE9和Firefox中却不起作用...我ve对其进行了无数次的修订，但是看不到为什么在这些浏览器中无法运行的任何问题。 If you can look it over and provide me with what or where I am going wrong in my javascript I'd greatly appreciate it as I'm thinking it will be easier for you guys/gals to spot the issue since it's fresh to your eyes. 如果您可以仔细查看一下，并在javascript中向我提供出现问题的地方或位置，我将不胜感激，因为我认为这样会让您更容易发现问题，因为它对您而言是新鲜的。
DEMO: http://jsfiddle.net/aeJtx/3/ 演示： http : //jsfiddle.net/aeJtx/3/
JAVASCRIPT: JAVASCRIPT：
/* ===== Start of 'Slider - My Statistics (Achievements - General)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_general .buttons_achievements_general span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_general:eq(0)').find('.fragment_achievements_general').length;
var fragment_width = $(this).parents('#slider_achievements_general:eq(0)').find('.fragment_achievements_general').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_general:eq(0)').find('.con_achievements_general');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
/* ===== Start of 'Slider - My Statistics (Achievements - Kills)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_kills .buttons_achievements_kills span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_kills:eq(0)').find('.fragment_achievements_kills').length;
var fragment_width = $(this).parents('#slider_achievements_kills:eq(0)').find('.fragment_achievements_kills').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_kills:eq(0)').find('.con_achievements_kills');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
/* ===== Start of 'Slider - My Statistics (Achievements - Scores)' ===== */
$(function () {
$('input.field').focus(function () {
if (this.title == this.value) {
this.value = '';
}
}).blur(function () {
if (this.value === '') {
this.value = this.title;
}
});
var currentPage = 1;
$('#slider_achievements_scores .buttons_achievements_scores span').on('click', function () {
var timeout = setTimeout(function () {
$("img").trigger("slidermove");
}, 100);
var fragments_count = $(this).parents('#slider_achievements_scores:eq(0)').find('.fragment_achievements_scores').length;
var fragment_width = $(this).parents('#slider_achievements_scores:eq(0)').find('.fragment_achievements_scores').width();
var perPage = 1;
var numPages = Math.ceil(fragments_count / perPage);
var stepMove = fragment_width * perPage;
var container = $(this).parents('#slider_achievements_scores:eq(0)').find('.con_achievements_scores');
var firstPosition = 0;
var lastPosition = -((numPages - 1) * stepMove);
if ($(this).hasClass('next')) {
currentPage++;
if (currentPage > numPages) {
currentPage = 1;
container.animate({
'left': firstPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
if ($(this).hasClass('prev')) {
currentPage--;
if (currentPage < 1) {
currentPage = numPages;
container.animate({
'left': lastPosition
});
return;
}
container.animate({
'left': -((currentPage - 1) * stepMove)
});
}
});
});
CSS: CSS：
/* ===== Start of 'Achievement Details - (General)' ===== */
#general_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 20px;
}
#general_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_general {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
position: relative;
top: 40px;
}
.buttons_achievements_general {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_general span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_general span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_general span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_general {
width: 577px;
height: 96px;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_general {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_general {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'General Medals Wrapper inside Fragment' ===== */
#general_medals_wrapper {
width: 576px;
height: 96px;
float: left;
}
/* ===== Start of 'Achievement Details - (Kills)' ===== */
#kills_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 50px;
}
#kills_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_kills {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
position: relative;
top: 40px;
}
.buttons_achievements_kills {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_kills span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_kills span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_kills span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_kills {
width: 577px;
height: 96px;
padding: 0;
margin: 0;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_kills {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_kills {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'Kills Medals Wrapper inside Fragment' ===== */
#kills_medals_wrapper {
width: 650px;
height: 150px;
float: left;
}
/* ===== Start of 'Achievement Details - (Scores)' ===== */
#scores_wrapper {
width: 650px;
height: 150px;
padding: 0;
margin: 0 auto;
background: #333;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
position: relative;
top: 80px;
}
#scores_wrapper h2 {
width: 626px;
height: 20px;
padding: 6px 0 6px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #AB9B68;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315, strength=2, color=000000);
}
#slider_achievements_scores {
width: 577px;
height: 96px;
padding: 0;
margin: 0 auto;
background: #222;
border: 2px solid #444;
-moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
box-shadow: inset 0 0.3em 0.9em 0.3em #000;
position: relative;
top: 40px;
}
.buttons_achievements_scores {
position: absolute;
top: -2px;
right: -25px;
z-index: 101;
}
.buttons_achievements_scores span {
position: absolute;
display: block;
width: 22px;
height: 62px;
padding: 34px 0 0 0;
cursor: pointer;
}
.buttons_achievements_scores span.prev {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 602px;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.buttons_achievements_scores span.next {
color: #111;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
right: 0;
background: rgba(204, 204, 204, 0.5);
border: 2px solid #444;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
-moz-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
-webkit-box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
box-shadow: inset 0 -0.15em 0.45em 0.15em #000;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}
.holder_achievements_scores {
width: 577px;
height: 96px;
padding: 0;
margin: 0;
position: relative;
top: -31px;
overflow: hidden;
}
.con_achievements_scores {
width: 100000px;
height: 96px;
position: absolute;
}
.fragment_achievements_scores {
width: 577px;
height: 96px;
float: left;
display: inline;
}
/* ===== Start of 'Kills Medals Wrapper inside Fragment' ===== */
#scores_medals_wrapper {
width: 650px;
height: 150px;
float: left;
}
HTML: HTML：
<div id="general_wrapper">
<h2>General</h2>
<div id="slider_achievements_general">
<div class="buttons_achievements_general"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_general">
<div class="con_achievements_general">
<div class="fragment_achievements_general">
<div id="general_medals_wrapper">
<p>Hi</p>
</div>
</div>
<div class="fragment_achievements_general">
<div id="general_medals_wrapper">
<p>World</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="kills_wrapper">
<h2>Kills</h2>
<div id="slider_achievements_kills">
<div class="buttons_achievements_kills"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_kills">
<div class="con_achievements_kills">
<div class="fragment_achievements_kills">
<div id="kills_medals_wrapper">
<p>Hello</p>
</div>
</div>
<div class="fragment_achievements_kills">
<div id="kills_medals_wrapper">
<p>World</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scores_wrapper">
<h2>Scores</h2>
<div id="slider_achievements_scores">
<div class="buttons_achievements_scores"> <span class="next" title="Next">»</span> <span class="prev" title="Previous">«</span>
</div>
<div class="holder_achievements_scores">
<div class="con_achievements_scores">
<div class="fragment_achievements_scores">
<div id="scores_medals_wrapper">
<p>New</p>
</div>
</div>
<div class="fragment_achievements_scores">
<div id="scores_medals_wrapper">
<p>Slider</p>
</div>
</div>
</div>
</div>
</div>
</div>
1 个解决方案
解决方案1
1 已采纳 2013-11-18 16:54:27
I believe I may have the solution to this. 我相信我可能对此有解决方案。 I ended up adding the above code to my site on a different script to see where the issue may be and think that this may be where you are having that issue of where it doesn't work in either FF or IE - as it happened to me as well in the past and sure enough once I implemented your above code it did the same thing. 我最终将上述代码添加到我的网站上的其他脚本中，以查看问题所在，并认为这可能是您遇到的问题，无论它在FF还是IE中都不起作用-碰巧过去对我也是如此，并且可以肯定的是，一旦实现了上面的代码，它就会做同样的事情。
Check how your html page is referencing your javascript page(s) if you have multiple js pages located in different folders/directories. 如果您在不同的文件夹/目录中有多个js页面，请检查html页面如何引用您的javascript页面。
For example, Do THIS: 例如，执行以下操作：
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Your_Script.js"></script>
<script type="text/javascript" src="/js/My_Script.js"></script>
Rather than THIS: 而不是这样：
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/My_Script.js"></script>
<script type="text/javascript" src="js/Your_Script.js"></script>
If you have multiple folders/directories using JS on your site, you need to make sure whatever page you are working on can check the JS script for the page you are working on first opposed to any other JS scripts you may be using in other folders/directories. 如果您的站点上有多个使用JS的文件夹/目录，则需要确保您正在处理的任何页面都可以先检查正在处理的页面的JS脚本，而不要检查其他文件夹中可能使用的任何其他JS脚本/目录。 So if you use the first example above that I have provided you, it should work with no problem at all in all browsers. 因此，如果您使用上面提供的第一个示例，则在所有浏览器中都应该没有问题。 This happened to me several months ago and it literally took me forever to figure out what was going on. 几个月前，这件事发生在我身上，从字面上看，我花了很长时间才弄清楚发生了什么事。
You want to make sure any jquery you are using is written up and be referenced first on all html pages, then any js scripts you may have should follow that, but make sure they are in the correct order on whatever html page you are working on. 您想确保正在编写的所有jQuery都已编写并首先在所有html页面上被引用，然后您可能拥有的所有js脚本都应遵循该jQuery脚本，但要确保它们在所处理的任何html页面上的顺序都正确。
Example of a setup: 设置示例：
Main directory: 主目录：
--> css folder -> css文件夹
-------> Your_css_Script.css -------> Your_css_Script.css
--> images folder ->图片文件夹
--> js folder (inside 'js folder' you have:) -> js文件夹（在“ js文件夹”内部）：
-------> Your_js_Script.js -------> Your_js_Script.js
-------> JQuery folder -------> JQuery文件夹
------------> jquery-1.9.1.min.js ------------> jquery-1.9.1.min.js
--> index.html -> index.html
--> Another folder - (inside 'Another folder' you have:) ->另一个文件夹-（在“另一个文件夹”中：）
-------> css folder -------> css文件夹
------------> Your_css2_Script.css ------------> Your_css2_Script.css
-------> images folder ------->图片文件夹
-------> js folder -------> js文件夹
------------> Your_js2_Script.js ------------> Your_js2_Script.js
-------> index2.html -------> index2.html
I apologize for the bad diagram above, but hopefully that helps you understand the structure. 对于上面的错误图表，我深表歉意，但希望能帮助您理解结构。 So, if you are working on index2.html, and also Your_js2_Script.js, but also need to reference what you have on Your_js_Script.js as well as your jquery script on your index2.html, you would need to reference those scripts on your index2.html page like so: 因此，如果您正在使用index2.html以及Your_js2_Script.js，但还需要引用Your_js_Script.js上的内容以及index2.html上的jquery脚本，则需要引用自己的脚本。 index2.html页面如下：
<script type="text/javascript" src="/js/JQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Your_js2_Script.js"></script>
<script type="text/javascript" src="/js/Your_js_Script.js"></script>
By the way, that's a pretty slick looking setup you got going on! 顺便说一下，这是一个非常漂亮的设置！ And I hope what I provided helps. 希望我提供的帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.