jQueryのロードスクリプトの遅れ

私のコードはファイルの読み込みに遅延があります。私は<a href="#string" id="hash"></a> を2回クリックして.txtファイルを表示させる必要があります。jQueryのロードスクリプトの遅れ

コード：たとえば

<script type='text/javascript'> 
    $(document).ready(function(){ 
    $("a#hash").click(function(){ 
     var loc = $(window)[0].location; 
     var getUrlString = $(loc).prop('hash').substr(1); 
     $("p").load(getUrlString + '.txt'); 
    }); 
    }); 
</script> 

<body> 
    <p>This is a placeholder for your content</p> 
    <a id="hash" href="#login">Login</button><br /> 
    <a id="hash" href="#register">Register</button><br /> 
    <a id="hash" href="#recovery">Recovery</button> 
</body>

私は、ページがロードされたのは今回が初めてログイン]をクリックした場合 - それは何を示して文句を言わないし。 [ログイン]をクリックした後に[登録]をクリックすると、ログインが表示されます。 [登録]をクリックした後に[リカバリ]をクリックすると、[登録]が表示されますが、[リカバリ]を再度クリックすると、最終的にリカバリが表示されます。

私の悪い英語のために申し訳ありません、または私の問題は何かをunderstadするのは難しいですか。私はまだjQueryを学んでいますが、私が自分自身を試したり失敗したりするのが簡単で、何が問題なのかを知ることは簡単です。チュートリアルを読むだけでは同じではありません:)

ありがとう。

出典

2012-02-12 Kristjan

最初に「id」を変更します。同じIDを呼び出すことはできません。クラスを使用！ – Hadas

あなたはそのような 'id'を使用しません。それらは一意である必要があります。つまり、ドキュメント全体の* any *要素に同じidのインスタンスが複数存在する必要はありません。したがって、 '

まず、IDはあなたのページ内で繰り返されるべきではありません。識別子で要素をグループ化する必要がある場合は、クラスを使用します。

2番目の問題は、クリックしたaの新しいURLを反映するように変更する前に、ウィンドウのURLを読み取ることです。これは、あなたが表示される前にクリックからのコンテンツを見ている理由です。 URLのハッシュ値を取得する必要がある場合は、クリックされたリンクのhref属性から取得する方がずっと簡単で簡単です。念頭に置いて

、これを試してみてください。

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("a.hash").click(function() { 
      var textfileName = $(this).attr("href").replace("#", ""); 
      $("p").load(textfileName + '.txt'); 
     }); 
    }); 
</script> 

<body> 
    <p>This is a placeholder for your content</p> 
    <a class="hash" href="#login">Login</button><br /> 
    <a class="hash" href="#register">Register</button><br /> 
    <a class="hash" href="#recovery">Recovery</button> 
</body>

Example fiddle

出典

2012-02-12 15:21:16

ログイン、登録、アカウントの復旧などのフォームのみが含まれます。フォームのみ。また、情報に感謝、私は前にそれを知らなかった:) – Kristjan

このスクリプトでは、それはtxtファイルをロードしていない！ – Kristjan

@Kristjanコードを更新しました。今すぐ試してみてください。 –

HTML要素には、固有のIDを持っている必要があります。このためにIDではなく、クラスとクラスセレクターを使用する必要があります。アンカータグも閉じていません（存在しない場合は、buttonを閉じています）。最後に、リンクが実際に行われないようにするために、クリックハンドラのデフォルトのアクションを防止する必要があります。起動する必要がある他のハンドラがない場合は、単にfalseを返すことができます。それ以外の場合は、コールバック関数eに渡されたイベントオブジェクトを使用し、e.preventDefault();を使用します。

<script type='text/javascript'> 
    $(document).ready(function(){ 
    $("a.hash").click(function(e){ 
     var loc = $(window)[0].location; 
     var getUrlString = $(loc).prop('hash').substr(1); 
     $("p").load(getUrlString + '.txt'); 
     // you probably want an .htm file, though it will likely work 
     // with HTML in a .txt file; browsers are forgiving 
     return false; 
    }); 
    }); 
</script> 

<body> 
    <p>This is a placeholder for your content</p> 
    <a class="hash" href="#login">Login</a><br /> 
    <a class="hash" href="#register">Register</a><br /> 
    <a class="hash" href="#recovery">Recovery</a> 
</body>

私はまた、あなたが段落にテキストファイルをロードしようとしている理由はわかりません。通常、のHTMLファイルをロードするか、スクリプトを実行した結果をロードします。

出典

2012-02-12 15:21:32 tvanfosson

これは私がスクリプトをテストするために作られたもので、段落は私の頭に浮かんだもっとも簡単なものでした。 :) ありがとうございます！ – Kristjan

@Kristjan - Webサーバーは、常にあらゆる種類のファイル（MIMEタイプ）を処理するとは限りません。私はファイルシステムを使ってローカルでこれをやっているのではないかと思っていますが、良い習慣をつくるためには注意が必要です。 * HTML *のファイルはマークアップがなくても '.htm'または' .html'拡張子で提供されます。それ以外の場合は、 '.txt'ファイルが許可されているかどうかを確認するために、Webサーバーの設定を再度確認する必要があります。 – tvanfosson

jQueryのロードスクリプトの遅れ

答えて

関連する問題