表示ページによって、aタグ内のリンク先を動的に変更させたい

JavaScript初心者です・・・。困っています。。
ご存知の方いらっしゃいましたらどうかご教示いただきたいです。

表示されているページによって、aタグ内のリンク先を動的に変更させたいと思っています。

■html
<div>
<a href="">英語リンク</a>
</div>

■条件
1.表示されているページが下記の場合、hrefに /en/aaa/ を入れたい
/china/aaa/
/china/aaa/bbb.html

2.表示されているページが下記の場合、hrefに /en/ccc/を入れたい
/china/ccc/
/china/ddd.html

上記のような条件だけではなく、対応するURLは条件が細かく別れているので、JSONファイルで管理してほしいと言われております。
下記のようにJSONファイル内で羅列し、JavaScriptで出したいのですが、どのように処理していいかわからず行き詰っています。

{
"urllist": {
"current": "/china/aaa/",
"link": "/en/aaa"
}
}

分かる方がいらっしゃいましたらお力お貸しいただけないでしょうか・・。。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： karumakaruma 回答日時： 2016/10/25 10:46

とりあえず、javascriptで書いたらこんな感じでできると思います。

条件に関して詳しく記載されていないので、JSON部分に条件となる項目を追加し
ループ内で条件比較を追加すればいいかと。

以下、インデントを全角空白にしているので半角空白に変更してください。
また、一部の「"」(半角)を「”」(全角)にしているので半角にしてください。

// javascript部

<script type="text/javascript">
window.onload = function () {
　　var json = [
　　　　{ "current":”http://localhost/china/aaa/”,
　　　　 "link" :"/en/aaa/"},
　　　　{ "current":”http://localhost/china/aaa/bbb.html”,
　　　　 "link" :"/en/aaa/"},
　　　　{ "current":”http://localhost/china/ccc/”,
　　　　 "link" :"/en/ccc/"},
　　　　{ "current":”http://localhost/china/ddd.html”,
　　　　 "link" :"/en/ccc/"}
　　]
　　for( var i in json ){
　　　　if( json[i].current == window.location.href ){
　　　　　　var element = document.getElementById( "nlink" ) ;
　　　　　　element.href = json[i].link;
　　　　　　break;
　　　　}
　　}
}
</script>

// アンカー部
<div>
<a id="nlink" href=”http://www.google.co.jp”>英語リンク</a>
</div>

上記では、JSONの配列をfor in ループで回し
現在のURL(window.location.hrefにて取得)とJSONの"current"を比較し
一致する場合、アンカーのhrefを変更しています。

あと、アンカーが読み込まれた後で実行しないといけないので、onload時に
実行する形にしています。

この回答へのお礼

お返事遅れて申し訳ありません！
教えていただいたソースを基に、試行錯誤した結果無事に思い通りの動きになりました・・・
本当にありがとうございました！！助かりました。
是非また機会がございましたら教えて下さい。

お礼日時：2016/10/29 15:21

No.2 回答者： fujillin 回答日時： 2016/10/25 11:02

こんにちは

ご質問のような処理は、内容的にはjavascriptで可能と思いますが、利用するシチュエーションが良くわかりません。

＞表示されているページによって、aタグ内のリンク先を動的に変更させたい
「ページによってリンク先を変えたい」というのであれば、そのページを出力する時点で処理しておくのが本来と思います。
何らかのプログラムから出力しているのであればそちらで、単なるhtmlファイルであればその文書内で指定しておけば済むことですので。


・・・というだけでは回答にならないので、
＞どのように処理していいかわからず行き詰っています。
どうしてもスクリプトで行う必要があるのでしたら、おおむね以下のような方法で実現可能だと思います。

1）表示ページのurlはlocation.hrefなどで参照できます。
https://developer.mozilla.org/ja/docs/Web/API/Wi …

2）url等は基本的に文字列ですので、指定した内容がその中に存在するかは正規表現やindexOf()メソッドを利用することでチェックが可能です。
ただし、単に含まれる/含まれないだけのチェックでよいのか、何階層目であるかなども含めてチェックするのかによって、具体的な判断の方法は変わってくるでしょう。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
https://developer.mozilla.org/ja/docs/Web/JavaSc …

3）上記のチェックはjsonの各keyに対して順に行うことになると思いますが、for～inの構文でループさせたり、keys()を利用してチェックを行えば宜しいかと。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
https://developer.mozilla.org/ja/docs/Web/JavaSc …

4）一致した場合は、対象とする要素のhref属性を書き換えれば終了。
要素の取得や属性の書き換えがわからない場合は、DOMの操作について学習してください。
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
http://javascriptist.net/docs/samples_dom.html

この回答へのお礼

お返事遅れて申し訳ありません！
MTでテンプレート管理している部分なので、html個別にはhrefを設定できない状況でした。
教えていただいた情報でいろいろ試してみたところ、無事に思い通りの動きになりました。本当にありがとうございました！！助かりました・・・
もっと勉強して理解を深めたいと思います。

お礼日時：2016/10/29 15:18