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

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

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

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

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

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

実現したかったこと

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

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

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

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

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

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

ソースはこちら

仕組みを解説いたします

スクリプト部分

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

(1)パラメータ取得

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

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

(2)表示位置初期化

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

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

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

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

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

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

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

https://office-obata.com/report/memorandum/post-5219/

(4)画面表示位置を指定位置に変更

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

(5)リンクがクリックされた時の処理

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

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

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

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

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

attr()関数の第2引数に設定値を入れると、その値に書き換わります。
この特性を利用して、リンクパラメータに追加をしています。

Jqueryは使いよう

画面表示位置はブラウザ側でしかわからない情報です。
今回はブラウザ側の情報をリンクパラメータとしてPHPに渡すという内容でした。

最初はそんなことできるのか?
と思いましたが、案外できてしまいました。

「できない」と決めつけるのではなく、
「できるかもしれない」と思ってググるほうが難題を解決できます。

今回もよい体験をいたしました。

今回のレポートは以上です。
読んでいただいてありがとうございました。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております