JQuery をつかってGETパラメータの値ごとにリンクの内容を変更する方法は？
jQuery をつかってGETパラメータの値ごとにリンクの内容を変更する方法を説明します。
JQueryとは？
jQqueryとはJavaScriptを使ってWebサイト上のページ上で利用する様々な機能をつかいやすくしたツールの集合（ライブラリ）です。
GETパラメーターとは？
GETパラメータとは、URLとリクエストパラメータを組み合わせて情報を取得する方法です。
たとえば、あるページ（フォームへのランディングページ）のURLの後ろに「?parametername=param_yyy」のようなクエリーストリング（パラメータ文字列）を付加して、ランディングページ内のリンクの内容をパラメーターごとに変更したい場合に今回の方法が利用できます。
まずは下記のHTMLとJavaScriptのコードをみてみます。
<html>
<body>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function(){
params = location.href.split("?");
paramms = params.length>1&&params[1].split("&");
var paramArray = [];
for ( i = 0; i < paramms.length; i++ ) {
vl = paramms[i].split("=");
paramArray.push(vl[0]);
paramArray[vl[0]] = vl[1];
}
if (params.length>1 && paramArray["parametername"] == "param_yyy") {
$("#formlink").attr("href", "http://yahoo.co.jp/");
} else {
$("#formlink").attr("href", "http://google.co.jp/");
}
});
</script>
<a href="#" id="formlink">go to form</a>
</body>
</html>
- 3行目で「jQuery」ライブラリを呼び出しています。
- 14行目でランディングページへのパラメーター「?parametername=param_yyy」がついていれば、
リンクの遷移先を「http://yahoo.co.jp/」にしています。
それ以外のパラメーターもしくはパラメータがないときにはリンクの遷移先は「http://google.com/」になります。 - 22行目は、パラメータによって遷移先を変更したいリンクです。「id」は14行目と一致させる必要があります。
以上のHTMLファイルとJavascriptコードを実際に公開中のWebページに貼り付けると、パラメータにより遷移先を変更するリンクを作成することができます。
「parametername」の箇所は自由に変更してください。また、「id=formlink」の箇所を変更して複数設定することで1ページ内でいくつものリンクを作成することができます。
JQueryを使うとこうしたWebのページ上でのちょっとした便利な機能を簡単に利用することができます。
是非試してみましょう。
