0

私は Web サイトを構築しており、ページの 1 つにいくつかの jQuery 要素 [開始ボタン、進行状況バー] があります。ページに JavaScript タイマーを実装していますが、JavaScript 情報をヘッダーに配置すると、jQuery が機能しなくなります。この問題を回避するにはどうすればよいですか? ありがとう

jQuery が機能する/Javascript が機能しない {% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">        </script>
<script type="text/javascript" src="{% static 'livestream/jquery-    timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
    <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
    <head>
        <style>
            .progressInfo {
                margin-left: leftmargin;   
            }
        </style>


        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet"     href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />

jQuery が動作しない/Javascript が動作する {% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>

<html>
    <head>
        <style>
                .progressInfo {
                margin-left: leftmargin;   
            }
        </style>


        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
4

2 に答える 2

2

まず、あなたの基本を整えます<html>。私は常に次のようなものを使用しようとしています...

<!DOCTYPE html>
<html>
     <head>
        <meta>
        <title>
        <script></script>
        <link>
     </head>
     <body>
     </body>
</html>

次に、jQuery をロードしてから、任意の jQuery スクリプトをロードします (最小化されたバージョンを使用することを忘れないでください)。jQuery の 1 つのバージョンのみをロードしていることを確認し、使用しているスクリプトが現在実行しているバージョンに準拠していない場合は、jQuery またはスクリプト (いずれか古い方) をアップグレードします。@Antti Happala が述べたように、jQuery の複数のインスタンスは確実に問題を引き起こします。

開発中に私が行うもう 1 つのことは、すべてが適切に機能することを確認するまで .js ファイルと .css ファイルのローカル バージョンを使用し、ホストされたバージョンに移行し、再テストしてからライブに移行することです。

だから、私は（あなたの最初の例から）のようなものを試してみます

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Main</title>

        <script type="text/javascript" src="js/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/jquery.timer.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>

        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
    </head>
    <body>
        <!-- Your good stuff here -->
    </body>
</html>

http://html5boilerplate.com/は例を探すのに適した場所です

すべての .js ファイルはローカルの js フォルダーにダウンロードされ、すべての .css ファイルはローカルの css フォルダーに保持されます (ここでも、ライブになるときにホストされたバージョンに変更できます)。 js または .css ファイルを 1 回作成し、可能な場合は結合して縮小します。

最後に、.js ファイルがすべて同じバージョンの jQuery で動作することを確認してください。それでもうまくいかない場合は、firebug/chrome dev ツールなどのエラーのチェックを開始してください。

于 2013-07-30T23:49:15.037 に答える