2

私はいくつかのスクリプトに取り組んでいますが、ハッシュに深刻な問題があります。

次のようなリンク画像のリストがあります。

<a href="#1"><img src="1.jpg" /></a>
<a href="#1"><img src="2.jpg" /></a>
<a href="#1"><img src="3.jpg" /></a>

私がやりたいのは、最初の画像をクリックした後にファイル files/#1.html をロードし、2 番目の画像をクリックした後に files/#2.html をロードすることだけです。

これが私のjQuery関数です：

$("a img").click(
function()
{  
        var hash = window.location.hash;
        $("#displayFile").load('files/'+ hash +'.html');
        $("#displayFile ").fadeIn(300);  
 });

したがって、画像をクリックすると、ハッシュが URL (href="#1") に追加され、正しいファイルが #displayFile div に読み込まれ、フェードインされます。

しかし、実際には画像をクリックすると空の #displayFile div が表示され、同じハッシュでサイトを更新した後、コンテンツが読み込まれます。スクリプトは、URL に入るずっと前にハッシュを取得すると思います。

修正方法は？

ありがとう。

4

3 に答える 3

4

イベント ハンドラーは、既定のアクションの前に実行されます。setTimeout関数が完了する前にリンクをたどることができないという厄介なトリックはありません。

this.href代わりに読んでください。

そうは言っても、賢明なものへのURIの代わりに任意のフラグメント識別子を使用しているようです。もしそうなら、画像をロードする実際の URL を指すように href を修正します。機能するものに基づいて構築します。

于 2010-08-19T20:14:42.420 に答える
2

リンクをクリックすると、次の順序でコードが実行されます。

  • jQuery クリック ハンドラ
  • onclick-handlers
  • ネイティブ/デフォルトの動作 (リンクの呼び出し、window.location への書き込み)

代わりに使用することをお勧めしますthis.href。またe.preventDefault()、ネイティブ/デフォルトの動作がブラウザによって実行されないように使用します。

于 2010-08-19T20:16:13.773 に答える
0

を変更するデフォルトのイベントlocation.hashはまだ発生していないため、.hash代わりに、次のようにアンカーから直接フェッチできます。

$("a img").click(function() {  
  var hash = this.parentNode.hash;
  $("#displayFile").load('files/'+ hash +'.html').fadeIn(300);  
});

<a>ただし、画像は唯一のものであるため、次のようにハンドラーをそれ自体にアタッチできます。

$("a").click(function() { 
  $("#displayFile").load('files/'+ this.hash +'.html').fadeIn(300);  
});
于 2010-08-19T20:16:20.890 に答える