堆棧內存溢出
  簡體   English   中英

javascript在IE 9和Firefox中均不起作用

[英]javascript not working in I.E. 9 as well as Firefox

 原文  2013-11-17 19:24:29  9   1    javascript/ jquery/ html/ css/ jquery-animate

問題描述

問候stackoverflow成員，

到現在為止，我一直處於兩難境地。 下面提供的代碼很長，但是，大多數代碼是每個標記有3個主要容器（一般，擊殺和得分）的重復代碼。

我在寫與jQuery 1.9.1一致的JavaScript時遇到了問題-滑塊不滑動-在Chrome中效果很好，但由於某些原因在IE9和Firefox中卻不起作用...我ve對其進行了無數次的修訂，但是看不到為什么在這些瀏覽器中無法運行的任何問題。 如果您可以仔細查看一下，並在javascript中向我提供出現問題的地方或位置，我將不勝感激，因為我認為這樣會讓您更容易發現問題，因為它對您而言是新鮮的。

演示： http : //jsfiddle.net/aeJtx/3/

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： 

/* ===== 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： 

<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

我相信我可能對此有解決方案。 我最終將上述代碼添加到我的網站上的其他腳本中，以查看問題所在，並認為這可能是您遇到的問題，無論它在FF還是IE中都不起作用-碰巧過去對我也是如此，並且可以肯定的是，一旦實現了上面的代碼，它就會做同樣的事情。

如果您在不同的文件夾/目錄中有多個js頁面，請檢查html頁面如何引用您的javascript頁面。

例如，執行以下操作： 

<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>

而不是這樣： 

<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>

如果您的站點上有多個使用JS的文件夾/目錄，則需要確保您正在處理的任何頁面都可以先檢查正在處理的頁面的JS腳本，而不要檢查其他文件夾中可能使用的任何其他JS腳本/目錄。 因此，如果您使用上面提供的第一個示例，則在所有瀏覽器中都應該沒有問題。 幾個月前，這件事發生在我身上，從字面上看，我花了很長時間才弄清楚發生了什么事。

您想確保正在編寫的所有jQuery都已編寫並首先在所有html頁面上被引用，然后您可能擁有的所有js腳本都應遵循該jQuery腳本，但要確保它們在所處理的任何html頁面上的順序都正確。

設置示例：

主目錄：

-> css文件夾

-------> Your_css_Script.css

->圖片文件夾

-> js文件夾（在“ js文件夾”內部）：

-------> Your_js_Script.js

-------> JQuery文件夾

------------> jquery-1.9.1.min.js

-> index.html

->另一個文件夾-（在“另一個文件夾”中：）

-------> css文件夾

------------> Your_css2_Script.css

------->圖片文件夾

-------> js文件夾

------------> Your_js2_Script.js

-------> index2.html

對於上面的錯誤圖表，我深表歉意，但希望能幫助您理解結構。 因此，如果您正在使用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>

順便說一下，這是一個非常漂亮的設置！ 希望我提供的幫助。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript函數就像對象，即“$”可以用作函數，例如$（）以及對象$ JavaScript無法在IE中使用，但在FF中可以正常工作 強制IE中的鏈接在Firefox中打開 Javascript - IE、Chrome、Firefox - 包含 external.js 文件的工作原理？ JavaScript提示輸入密碼（即*******） 使用Blazor（即WebAssembly）+ JavaScript JavaScript函數在Firefox上運行良好但在Chrome上運行良好 Javascript密碼不能在Firefox中運行，但在chrome中運行良好 如何在ajax調用后刷新頁面，但還要傳遞參數？ 即未完全刷新 將VBScript代碼轉換為javascript（即JScript）代碼
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM