Written by Kasumi

jqueryを使って、パラメーターを追加・付与し、条件分岐する方法

こんにちは、カスミです。

さて、以下のような疑問をお持ちでしょうか?

jqueryを使って、URLにパラメータ―を付与したい。

また、付与されてるURLと付与されてないURLで条件分岐して、テストページとして見せたい。

本記事では、このような疑問を解決致します。

※jqueryを使うため、事前にライブラリを読み込みましょう。

パラメータ―を付与し、条件分岐させるコード

$(function () {
  var url = location.href;
  params = url.split("?");
  spparams = params[1].split("&");
  var paramArray = [];
  for (i = 0; i < spparams.length; i++) {
    vol = spparams[i].split("=");
    paramArray.push(vol[0]);
    paramArray[vol[0]] = vol[1];
  }
  if (paramArray["key"] == "test") {
    // パラメータ―付きの場合の処理
  } else {
    // パラメータ―無しの場合の処理
  }
});

上記がサンプルコードになります。

詳細は以下の通りです。

サンプルコードを実装すると、URLに以下のようなパラメータが付与されます。

https://ドメイン名/?key=

サンプルコードの下部あたりにある条件分岐にて、?keyにtestが入った場合(https://ドメイン名/?key=test)の処理と入ってない場合の処理を書いてif elseで書いて上げればOKです。

以上で解説を終わります。

まとめ

本記事ではjqueryを使った方法を紹介しておりますが、PHPでパラメータを付与する方法についても下記記事で扱っているので参照してみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
2007
jQuery

【簡単コピペ】CSSとjQueryを使ってハンバーガーメニューを実装しよう

更新日:2022.09.09
598
jQuery

【jQuery】スマホ時のタップ・スワイプを検知、任意のイベントを実行する方法

更新日:2022.09.09
249
jQuery

【簡単】横並びブロック要素の高さを揃えるにはmatchHeight.jsを使おう

更新日:2022.09.09
398