2012-01-26 16 views
1

次のコードはテスト用です。通常、リンクのhrefは「http://www.google.com/」を指しますが、attrは「http://maps.google.com」を参照するように変更する必要がありますが、参照は変更されません。それはなぜ動作していないのですか?おかげhrefリンクの内容を変更する

<html> 
<head> 
<script type="text/javascript"> 
$("a#changeme").attr('href', 
'http:\/\/maps.google.com/'); 
</script> 
</head> 
<body> 
<div class="content"> 
<p>Link to <a href="http://www.google.com/" 
id="changeme">Google</a> 
in the content...</p> 
</div> 
</body> 
</html> 
+0

なぜセレクタとして '#changeme'を使用しないのですか? IDセレクタが最も高速です。セレクタは逆方向に実行されるため、最初に#changemeを見つけてからアンカーだけを除外しますが、一意のIDを持っているのはなぜですか? –

+0

なぜ 'text/javascript'を使うのですか?現代のブラウザはすべて、 'type'属性を使わずにスクリプトタグを解釈し、Javascriptにします。これは非常に古い技術です。 –

答えて

2
  1. jQueryがロードされていません。
  2. そうだった場合は、$(document).readyハンドラでラップする必要があります。
  3. これはjQueryなしでも実行できます。

コード:

window.onload = function() { 
    document.getElementById("changeme").href = 'http://maps.google.com/'; 
}; 

onloadハンドラはDOMContentLoadedハンドラにexactely等しくないが、それはより良いサポートを持っており、ここでは好ましいかもしれません。また、あなたは<body>の最後に<srcipt>ブロックを移動し、任意のonloadハンドラせずにメソッドを使用することができます。

<body> 
<div class="content"> 
<p>Link to <a href="http://www.google.com/" id="changeme">Google</a> 
in the content...</p> 
</div> 
<script type="text/javascript"> 
    // This code is placed after the element, so the reference does exist now. 
    // In the head, the same code will throw an error, because the body doesn't 
    // even exist. 
    document.getElementById("changeme").href = 'http://maps.google.com/'; 
</script> 
</body> 
+0

OK。だから今私の問題の要点に。変更する必要がある参照は、次のスクリプトのXXXビットです。 –

+0

* * *スクリプト内の "XXX bit"? –

+0

Sooryはスクリプトを忘れましたが、私はあなたが提案したものを試してみました。私はそれが私の問題を解決したと思います。それを完全にチェックする必要があります。もう一度ありがとう。 –

0

スクリプトはヘッダにある他のコンテンツがロードされる前に、それが実行されますので、(あればjQueryはアクティブでもあり、参照はありません)。それを関数に入れてから、後で呼び出す必要があります(たとえば、onloadまたはタイマーを使用)。ブラウザのセキュリティ機能について考えると、クリックする前にサイトがリンクを操作しないようにすることができます。

+0

ありがとう、私は今それを理解しています。セキュリティ機能は何ですか? –

+0

私はそれについてはわかりませんが、例えばステータスバーに「http://www.google.com/」というリンクが表示されますが、クリックすると「http://www-google-com.fake-site.com/」に設定されます。しかし、言及したように、あなたがスクリプトを書いた方法(関数の外にある)に起因する可能性がより高くなります。 – Mario

0

ここでは、これを行うための正しいjQueryの方法のコードを示します(ドキュメントの準備ができています)。

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#changeme").attr('href', 'http:\/\/maps.google.com/'); 
}); 
</script> 
</head> 
<body> 
<div class="content"> 
<p>Link to <a id="changeme" href="http://www.google.com/">Google</a> 
in the content<a href="test">test</a>...</p> 
</div> 
</body> 
</html>