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

究極のネタ晴らし

説明書

ユーザが表示を切り替えるためのスクリプト、その2です。
ソースの解説については後述を参照のこと。

ソースについて

// HTMLソース

// CSS部分

.ntbr{
	display: none;
}

// パターンその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">
隠したい内容
</任意の要素>

// Javascriptソース

// ネタバレスクリプト2実行本体
function ntbr2(obj){
	var idn = obj.getAttribute("id");
	var deii;
	var deix;
	
	if(idn.slice(0, 2) == "in"){
		idni = "ni" + idn.slice(2);
		idnx = "nx" + idn.slice(2);
	}
	else{
		idni += "ia";
		idnx += "xa";
	}
	
	deii = document.getElementById(idni);
	deix = document.getElementById(idnx);
	
	if(obj.checked){
		deii.style.display = "none";
		deix.style.display = disfunc(deix.tagName);
	}
	else{
		deii.style.display = disfunc(deii.tagName);
		deix.style.display = "none";
	}
}

// 要素の種類
function disfunc(tgn){
	var ele;
	
	if(tgn == "table"){
		ele = "table";	// この際、"block"でもよい
	}
	else if(tgn == "span"){
		ele = "inline";
	}
	else{
		ele = "block";
	}
	
	return ele;
}

能書き

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

disfunc()関数についてはネタバレスクリプト1のものを流用しているだけです。 ネタバレスクリプト1(ntbr()関数)、ネタバレスクリプト2(ntbr2()関数)、disfunc()関数とで独立で存在しており、 関数名のブッキングなどもないことから、同じファイル上での共存も可能です。ｗ

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

そして、こちらにも、id名のルールが2種類あります。

まず、チェックボックス(<input type="checkbox" id="in00" onchange="ntbr(this)">)のidが”in”で始まる場合は「in00」などのように、 ”in ＋番号”の形で番号を添えて書きます。番号は何桁でも構いません(というか、実際には番号である必要はありません)。
”in”系のid名の場合は、最初に表示させておきたい要素のid名を「ni00」などのように、”ni ＋番号”の形で番号を添えて書きます。 逆に、最初は隠しておきたい要素のid名は「nx00」などのように、”nx ＋番号”の形で番号を添えて書きます。 ここで使用する番号はチェックボックスのid名と同じ番号にしてください。
つまり、”n”の次が”i”か”x”かの違いです。

次に、チェックボックス(<input type="checkbox" id="hoge" onchange="ntbr(this)">)のidが”in”で始まらない場合、 要は、”hoge”のような任意の文字列ももちろん設定可能です。
この場合、最初に表示させておきたい要素のid名を「hogeia」などのように、”チェックボックスのid名 ＋ia”の形で、末尾に”ia”を添えて書きます。 一方で、最初は隠しておきたい要素のid名は「hogexa」などのように、”チェックボックスのid名 ＋xa”の形で、末尾に”xa”を添えて書きます。
こちらも”i”か”x”かの違いだけです。