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

ぺぇじへっどらいん

ネタバレスクリプト

あほーが、見ィーるゥー。 豚ーの、ケーツゥー。

よくある、ユーザが表示を切り替えるためのスクリプトです。
当サイトの基本として組み込まれているため、いろんなページで試してみてもいいかもしれません。

HTML

// パターンその1
<label><input type="checkbox" name="c00" id="in00" onchange="ntbr(this)">表示する</label><br>
<任意の要素 class="ntbr" id="ni00">
隠したい内容
</任意の要素>

// パターンその2
<label><input type="checkbox" name="c00" id="hoge" onchange="ntbr(this)">表示する</label><br>
<任意の要素 class="ntbr" id="hogea">
隠したい内容
</任意の要素>

CSS

.ntbr{
    display: none;
}

Javascript

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

CSSをJSでいじっているだけ。
もっと言うと、任意の要素に対して、普段は非表示の「display:none;」としているところに対し、 チェックを入れることで「display:block;」に置き換えてしまうという動作をしているスクリプト。
ついでに、チェックを外すと非表示の「display:none;」に置き換わる。

最初からdisplay:none;の定義がないところなら表示する際の動作は「display:;」になるようにJSを組めばよいのだが、 display:none;の定義があるところならブロック要素かインライン要素か決めないといけないところに注意。

見ての通り、任意の要素に対して設置可能だが、 インラインかブロック要素に対してしか使わないと思うので(el.tagName === "SPAN") ? "inline" : "block";となっている。 どうしてもという人は自分で頑張ってくらはい。

それから、CSSをいじるスクリプトであるため、CSSの記述を忘れないように。 デフォルトで隠す場合は、任意の要素(ソースではntbrクラス)に対して「display:none;」を記述しておく必要がある。