彩りの大地 Laboratory /ネタバレスクリプト2

ぺぇじへっどらいん

ネタバレスクリプト2


某小説の犯人の名前は......
いや、やっぱり本編を見て確認してください。ｗ

ユーザが表示を切り替えるためのスクリプト、その2です。
当サイトの基本として組み込まれていますが、この手のタイプを実装しているところが少ないのが難点。

HTML

// パターンその1
<label><input type="checkbox" name="c00" id="in00" onchange="ntbr2(this)">ネタバレする</label><br>
<任意の要素 id="ni00">
最初から表示させておきたい内容
</任意の要素>
<任意の要素 class="ntbr" id="nx00">
隠したい内容
</任意の要素>

// パターンその2
<label><input type="checkbox" name="c00" id="hoge" onchange="ntbr2(this)">ネタバレする</label><br>
<任意の要素 id="hogeia">
最初から表示させておきたい内容
</任意の要素>
<任意の要素 class="ntbr" id="hogexa">
隠したい内容
</任意の要素>

CSS

.ntbr{
    display: none;
}

Javascript

function ntbr(obj) {
    const idn = obj.id;
    const dein = obj;
    
    let idni, idnx;
    if (idn.startsWith("in")) {
        idni = "ni" + idn.slice(2);
        idnx = "nx" + idn.slice(2);
    } else {
        idni = idn + "a";
        idnx = idn + "xa";
    }
    
    const deii = document.getElementById(idni);
    const deix = document.getElementById(idnx);
    const ptn = deix ? 2 : 1;
    
    // タグ名に応じた表示スタイルを判定する
    const getDisplayType = (el) => (el.tagName === "SPAN") ? "inline" : "block";
    
    if (deii) {
        if (dein.checked) {
            deii.style.display = (ptn === 1) ? getDisplayType(deii) : "none";
            if (deix) deix.style.display = (ptn === 2) ? getDisplayType(deix) : "none";
        } else {
            deii.style.display = (ptn === 1) ? "none" : getDisplayType(deii);
            if (deix) deix.style.display = "none";
        }
    }
    
    // ClassName側の処理も同様に修正
    const dci = document.getElementsByClassName(idni);
    const dcx = ptn === 2 ? document.getElementsByClassName(idnx) : [];
    Array.from(dci).forEach((el, idx) => {
        if (dein.checked) {
            el.style.display = (ptn === 1) ? getDisplayType(el) : "none";
            if (dcx[idx]) dcx[idx].style.display = (ptn === 2) ? getDisplayType(dcx[idx]) : "none";
        } else {
            el.style.display = (ptn === 1) ? "none" : getDisplayType(el);
            if (dcx[idx]) dcx[idx].style.display = "none";
        }
    });
    
}

ネタバレスクリプト1とほぼ同じで、こちらもやっぱりCSSをJSでいじっているだけ。
最初に表示させておきたい要素の表示はいじらず、隠しておきたいほうに対して非表示の「display:none;」として置くだけ。 そして、チェックを入れることで、最初から表示させている要素を「display:none;」とし、 隠しているほうを「display:block;」に置き換えてしまうという動作というだけの話。
要は、トグル方式で表示/非表示を切り替えているだけである。

ネタバレスクリプト1をただそのまま改良しているだけなので、 最初からネタバレスクリプト2を入れるつもりでネタバレスクリプト1の機能だけ使うつもりでも問題なく動く。

設置方法に関してもネタバレスクリプト1とほとんど同じなので割愛。