[jQuery]パラメータにより表示するコンテンツを変更する方法

何番煎じだよ。

前の記事から更に変わった。

DEMO
解説的なもの

DEMO

Document

パラメータ自体がなければ表示するコンテンツ
該当するパラメータがあったら表示するコンテンツ
該当するパラメータがなければ表示するコンテンツ

そういうやつ。

解説的なもの

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="scripts.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>パラメータで表示切替</h1>
<ul>
    <li><a href="https://test.megefeps.info/20221006_para/">なし</a></li>
    <li><a href="https://test.megefeps.info/20221006_para/?para=para01">?para=para01</a></li>
    <li><a href="https://test.megefeps.info/20221006_para/?para=para02">?para=para02</a></li>
    <li><a href="https://test.megefeps.info/20221006_para/?para=para03">?para=para03</a></li>
</ul>
<div class="paraChange" data-parameter="default">default</div>
<div class="paraChange" data-parameter="para01">para01</div>
<div class="paraChange" data-parameter="para02">para02</div>
<div class="paraChange" data-parameter="para03">para03</div>
</body>
</html>

.paraChangeが表示する内容。<ul>でパラメータを並べた。

CSS

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.paraChange{
    display: none;
}

jsの反映のディレイ対策に読み込み時のフェードインを仕込んだのと、パラメータギミック用として.paraChangeを非表示。表示はjsで管理。

JS(jQuery)

$(function(){
        //パラメータ取得
        var arg  = new Object;
        url = location.search.substring(1).split('&');
        for(i=0; url[i]; i++) {
            var k = url[i].split('=');
            arg[k[0]] = k[1];
        }
        //「para」の値
        var ShowNumSend = arg.para;
        //ページ上のdata-parameterとパラメータの値を照合
        var checkLength = [];
        $('.paraChange').each(function(){
            checkLength.push($(this).data('parameter'));
        })
        //パラメータ自体がない、もしくは該当がなければdefaultを表示。該当があればそれを表示。
        if($.inArray(ShowNumSend, checkLength) == -1){
            $('[data-parameter="default"]').show();
            return;
        }else{
            $('[data-parameter="'+ ShowNumSend +'"]').show();
        }
})

動作自体は2021年版と大差ない。ただまあ、チェック機構が甘かった部分があったので更新。
該当する値がない、だけどkeyは存在する場合の処理が足りてなかった。

今回はdataで管理したので、ページ上のdata属性の値を配列にまとめてパラメータとすり合わせた（.inArray）。.inArrayは照合がなかった場合-1になる。今回はひとまとめにしたけど、「該当がない」と「パラメータがない」を切り分けたいならlocation.searchの時点で空欄時の条件分岐を付けたらいい。

そんな感じで。