Jqueryでリンククリック時に追加パラメータを設置する

2021年7月27日2022年5月16日

PHPでHTML側から情報をもらう方法として、フォームによる投稿があります。
これと異なる方法に、リンクにパラメータを付加する方法があります。

例えば以下のような記述です。

sample.php?date=20210630

1	sample.php?date=20210630

リンクにパラメータを直接記述して、PHPに情報を送信する方法です。

今回昔制作したPHPプログラムに手を加えることがありました。
その際に、リンク式パラメータに対し後から追加パラメータを設置する必要がありました。
Jqueryでそんなことができるのだろうか？
と思いましたが、ググって調べてやってみると、実現できました。

忘備録として記録いたします。

今回の内容

1. 実現したかったこと
2. クリックした段階で表示位置をリンクパラメータに追加するサンプル
- 2.1. ソースはこちら
3. 仕組みを解説いたします
4. Jqueryは使いよう

実現したかったこと

今回やりたかったことは記事のUP／DOWN処理に、表示位置をキープするという処理を加えることです。
いままでＵＰ／ＤＯＷＮをすると画面が毎回先頭位置へ移動していました。
使い勝手が悪いので、ボタンを押した時点での画面表示位置をキープする処理を付け加えたいと思いました。
表示位置をキープする処理は以前に行っていたので、どうすればよいかわかります。

PHPフォーム送信しても、現在の表示位置をキープできるようするテクニック

ただ、前回は「フォーム式」で表示位置をキープしていましたが、今回は「リンク式」で表示位置をキープする必要がありました。

「リンク式」となっている部分を「フォーム式」に作り替える方法もありましたが、大幅修正が必要になるため、「リンク式」のまま追加で現在の表示位置パラメータを追加することにしました。

クリックした段階で表示位置をリンクパラメータに追加するサンプル

クリックした時点で、現在の表示位置をリンクパラメータに追加するサンプルです。
こちらからご覧いただけます。

各メニューボタンのリンクには、リンクパラメーターは記述されていませんが、クリックするとリンクにパラメータが付加されます。

ソースはこちら


<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>テスト</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	var para = para_get();
	var posi = 0;

	if (("posi" in para) == true)
	{
		posi = para["posi"];
		$("#msg").text("付加されたパラメータは ?posi="+posi+"です");
	}
	else
	{
		$("#msg").text("パラメータは付加されていません");
	}

	$(window).scrollTop(posi);
	$("ul li a").click(function()
	{
		var link_url = $(this).attr("href");
		var posi = $(window).scrollTop();
		$(this).attr("href", link_url+"?posi="+posi);
	});


});

function para_get()
{
	// URLパラメータを"&"で分離する
	var url_search = location.search.substr(1).split('&');
 
	// パラメータ連想配列エリア初期化
	var para = [];
 
	// キーエリア初期化
	var key = null;
 
	for(var i = 0 ; i < url_search.length ; i++)
	{
		// "&"で分離したパラメータを"="で再分離
		key = url_search[i].split("=");
 
		// パラメータを連想配列でセット
		para[key[0]] = key[1];
	}
 
	// 連想配列パラメータを返す
	return (para);
}
</script>
<style type="text/css">
msg
{
	border: 1px solid #000;
	padding: 20px;
	height: 60px;
	width: 200px;
	position: fixed;
	left: 20px;
	top: 20px;
}

#reset
{
	padding: 0px;
	height: 60px;
	width: 200px;
	position: fixed;
	left: 20px;
	top: 140px;
}

ul
 {
	padding: 20px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #ccc;
}

li
{
	list-style-type: none;
	margin-bottom: 200px;
	padding: 0px;
}

li:last-child
{
	margin-bottom: 0px;
}

a
{
	display: block;
	background-color: #333;
	padding: 10px;
	color: #FFF;
}

a:hover
{
	background-color: #3CF;
}

</style>
</head>
<body>
<div id="msg"></div>
<div id="reset"><a href="01.html">リセット</a></div>

<ul>
<li><a href="01.html">メニュー1</a></li>
<li><a href="01.html">メニュー2</a></li>
<li><a href="01.html">メニュー3</a></li>
<li><a href="01.html">メニュー4</a></li>
<li><a href="01.html">メニュー5</a></li>
<li><a href="01.html">メニュー6</a></li>
<li><a href="01.html">メニュー7</a></li>
<li><a href="01.html">メニュー8</a></li>
<li><a href="01.html">メニュー9</a></li>
<li><a href="01.html">メニュー10</a></li>
</ul>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<!doctype html>

<html>

<head>

$(document).ready(function()

{

var para = para_get();

var posi = 0;

if (("posi" in para) == true)

{

posi = para["posi"];

$("#msg").text("付加されたパラメータは ?posi="+posi+"です");

}

else

{

$("#msg").text("パラメータは付加されていません");

}

$(window).scrollTop(posi);

$("ul li a").click(function()

{

var link_url = $(this).attr("href");

var posi = $(window).scrollTop();

$(this).attr("href", link_url+"?posi="+posi);

});

function para_get()

{

// URLパラメータを"&"で分離する

var url_search = location.search.substr(1).split('&');

// パラメータ連想配列エリア初期化

var para = [];

// キーエリア初期化

var key = null;

for(var i = 0 ; i < url_search.length ; i++)

{

// "&"で分離したパラメータを"="で再分離

key = url_search[i].split("=");

// パラメータを連想配列でセット

para[key[0]] = key[1];

}

// 連想配列パラメータを返す

return (para);

}

</script>

msg

{

border: 1px solid #000;

padding: 20px;

height: 60px;

width: 200px;

position: fixed;

left: 20px;

top: 20px;

}

#reset

{

padding: 0px;

height: 60px;

width: 200px;

position: fixed;

left: 20px;

top: 140px;

}

{

padding: 20px;

width: 300px;

margin-right: auto;

margin-left: auto;

border: 1px solid #ccc;

}

{

list-style-type: none;

margin-bottom: 200px;

padding: 0px;

}

li:last-child

{

margin-bottom: 0px;

}

{

display: block;

background-color: #333;

padding: 10px;

color: #FFF;

}

a:hover

{

background-color: #3CF;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

仕組みを解説いたします

スクリプト部分

スクリプト部分について解説いたします。
大きく5つの部分に処理が分かれています。

$(document).ready(function()
{
	// （１）リンクパラメータ取得
	var para = para_get();

	// （２）表示位置初期化
	var posi = 0;

	if (("posi" in para) == true)	// （３）リンクパラメータに表示位置が含まれているか？
	{
		// 含まれている場合の処理
		posi = para["posi"];
		$("#msg").text("付加されたパラメータは ?posi="+posi+"です");
	}
	else
	{
		// 含まれていない場合の処理
		$("#msg").text("パラメータは付加されていません");
	}

	// （４）画面位置を指定位置に変更
	$(window).scrollTop(posi);

	// （５）リンクがクリックされた時の処理
	$("ul li a").click(function()
	{
		// リンク部分の記述を取り出す
		var link_url = $(this).attr("href");

		// 現在の表示位置を取得
		var posi = $(window).scrollTop();

		// リンクパラメータに現在の表示位置パラメータを付加する
		$(this).attr("href", link_url+"?posi="+posi);
	});
});

$(document).ready(function()

{

// （１）リンクパラメータ取得

var para = para_get();

// （２）表示位置初期化

var posi = 0;

if (("posi" in para) == true) // （３）リンクパラメータに表示位置が含まれているか？

{

// 含まれている場合の処理

posi = para["posi"];

$("#msg").text("付加されたパラメータは ?posi="+posi+"です");

}

else

{

// 含まれていない場合の処理

$("#msg").text("パラメータは付加されていません");

}

// （４）画面位置を指定位置に変更

$(window).scrollTop(posi);

// （５）リンクがクリックされた時の処理

$("ul li a").click(function()

{

// リンク部分の記述を取り出す

var link_url = $(this).attr("href");

// 現在の表示位置を取得

var posi = $(window).scrollTop();

// リンクパラメータに現在の表示位置パラメータを付加する

$(this).attr("href", link_url+"?posi="+posi);

});

（1）パラメータ取得

呼び出し時のリンクパラメータをＧＥＴしています。
PHPの場合は造作もないことですが、今回のサンプルはJavascriptで組んでいるため、Javascriptからリンクに記述されたパラメータを取得しています。

以前の記事をそのまま流用しています。

JavascriptでURLパラメータを連想配列にして取得する。

（２）表示位置初期化

パラメータとして渡された「表示位置情報」を入れる変数の初期化を行います。
０をセットしているのは、初回起動時に先頭を表示させるためです。
なぜならば、初回起動時はリンクパラメータが渡されないため、初期値を入れておかないと誤動作を起こす可能性があるためです。

また、（３）のelseの処理でposi=0を設定する方法もありますが、私はあえて先に記述します。
それは、if文の結果にかかわらずposi変数に値が必ず入ることを保証できるためです。

余談ですが、プログラムでは結果的に同じことでも「例外」ということが得てして発生します。
例えばif文でもthen、elseのどちらのも行かないということもまれに起こります。

そんな場合にでも初期値は必ず設定されるようにしておくことで、誤動作を最小限にすることができます。

（3）リンクパラメータの有り無し判断

リンクパラメータが付加されている場合と、されていない場合で処理を分岐しています。
(“posi” in para) は見慣れない構文ですが、この記述で正確に配列メンバ名のあり・なしを判定できます。

詳しくはこちらの記事をご参照ください。

JavascriptでPHPの「isset」のやり方～配列メンバ名の有無を判断する～

（４）画面表示位置を指定位置に変更

この部分で、表示位置に画面を移動しています。
scrollTop()はJqueryで画面表示位置を指定する関数です。

（５）リンクがクリックされた時の処理

この部分でメニューがクリックされた場合に、リンクに現在のポジションをパラメータとして付加しています。
仕組みはJqueryのattr()関数を利用して付け加えています。

attr()関数は、参照しているHTMLの記述を抜き出したり、付け加えたりします。
例えば以下のような例です。

//attr()例
<a href="https://office-obata.com" target="_blank">リンク</a>

// Jquery 例
$("a").click(function()
{
    var $link = $(this).attr("href");
    var $target = $(this).attr("target");
});

//attr()例

// Jquery 例

$("a").click(function()

{

var $link = $(this).attr("href");

var $target = $(this).attr("target");

});

上記の例だと、$link には「https://office-obata.com」
$targetには「_blank」が格納されます。

attr()関数は対象タグの項目を参照します。

これに対し、以下のように記述すると記載内容が変わります。

//attr()例
<a href="https://office-obata.com" target="_blank">リンク</a>

// Jquery 例
$("a").click(function()
{
    $(this).attr("href", "https://office-obata/blog/");
    $(this).attr("target", "_top");
});

// 実行した結果
<a href="https://office-obata.com/blog/" target="_top">リンク</a>