ユーザが表示を切り替えるためのスクリプト、その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
// ネタバレスクリプト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”かの違いだけです。