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

HTML

<select name='s0' id='hoge' onchange='ntbrSelect(this, \"hoge\", 4);'>
<option>1番目</option>
<option>2番目</option>
<option>3番目</option>
<option>4番目</option>
</select>

<任意の要素 id="hoge0a">
最初から表示させておきたい内容
</任意の要素>
<任意の要素 class="ntbr" id="hoge1a">
隠したい内容
</任意の要素>
<任意の要素 class="ntbr" id="hoge2a">
隠したい内容
</任意の要素>
<任意の要素 class="ntbr" id="hoge3a">
隠したい内容
</任意の要素>

CSS

.ntbr{
    display: none;
}

Javascript

// ネタばれスクリプト セレクトボックス版
function ntbrselect(obj, prefix, maxCount) {
    /**
     * 汎用セレクトボックス・ネタばれ切り替え関数 (ntbrSelect)
     * @param {HTMLElement} obj - セレクトボックス自身 (this)
     * @param {string} prefix - 切り替える対象要素のID/クラス名の接頭辞
     * @param {number} maxCount - 選択肢の最大総数＝option要素の数
     */
    const selectedIdx = obj.selectedIndex;
    
    // タグ名に応じた表示スタイルを判定するヘルパー
    const getDisplayType = (el) => (el.tagName === "SPAN") ? "inline" : "block";
    
    // 0 から maxCount までの関連要素をすべて走査
    for (let i = 0; i < maxCount; i++) {
        const targetId = `${prefix}${i}a`;
        
        // 【1】IDによる1対1の切り替え処理
        const targetEl = document.getElementById(targetId);
        if (targetEl) {
            targetEl.style.display = (i === selectedIdx) ? getDisplayType(targetEl) : "none";
        }
        
        // 【2】ClassNameによる1対多の一斉切り替え処理
        const targetClasses = document.getElementsByClassName(targetId);
        Array.from(targetClasses).forEach((el) => {
            el.style.display = (i === selectedIdx) ? getDisplayType(el) : "none";
        });
    }
    
}