はもちくわ

コードについて自分なりの解釈を書いてます。

【Javascript】はてなブログ上で要素を表示・非表示させる実装をして気づいたこと

やっとバイトが決まって、仕事になれるまで下書きのまま放置していたこの記事を完成させることにしました。

正社員で12年働いた会社から用済みと解雇されてから、やっと仕事にありつけたのがアルバイトっていうのも、、、厳しい世の中だなと痛感しております。日本社会は落ちこぼれるととことん落ちるなｗｗ

 

さて、今回はページを作成するにあたって、説明する文などそのまま表示させると長くなるので、常には表示させないようにしておいて、タグを押すと表示させたり非表示させたりするJavascriptをはてなブログに実装した話です。

 

以前、下の記事でJavascriptでウインドウを出すというものを書きました。

 

hamo440.hatenablog.com

 

このコードのまま、このブログのヘッダーに実装しようとしたところ、どうもclassList.toggleが悪いのかうまくいきませんでした。ブログは仕組みの都合でclassが複数の箇所にありそうですし、classList自体が使えないのかもと思い、別の方法を取るとことにしました。そして、改めて自分のコードを見直したのですが、、、、あら無駄なことしてると気づいてしまいましたww

動いてしまうとそれでよしになってしまいますね、、、、だめな例です。

 

ひとまず、細かいことは無しにして、このブログに書いたコードから書きます。

早速そのJavascript使います。



▼▼▼下の要素をクリック▼▼▼

今回のコード
表示ON・OFF

CSSでshow(表示)とhide(非表示)クラスを作成している前提です

Javascript
<script>
　function openclass(i){
　　var window= document.getElementById("window"+ i);
 　　if(window.className=='hide'){//hideは消すクラス
   　　　window.className='show';//showは表示するクラス
 　　}else{
   　　　window.className='hide';
 　　}
　}
</script>

▲▲このJavascriptでウインドウの表示・非表示してます。

今回はきっかけにしている要素は<a>タグです。

ここで使っていることでJavascriptと関係ないのは次の２つです。

  • ポインタが要素に乗ると操作案内が出る
  • コードがゆっくり表示される

この２つは以前の記事で書いた:hover~クラス名とCSSアニメーションで実装しています。（そちらは以前のものを見てください。）

 

さて、このJavascriptコードはHTML側のid名の最後を数字にすることで、数値を変えればウインドウを増やすことができるようになっております。
仕組みとしては、Javascriptのfunction宣言のあとの1行目がポイントです。
HTMLからonclickで受け取った数字を使って、id名を作成し、変数windowに代入します。こうすることによって、コードを変えることなく同じページ内でもid名の数字を変えれば複数のウインドウが使えるようになります。（この点についてはHTML側の解説でも説明します。）

前回のtoggleでもevalを使ってその都度id名を作る方法なので、考え方はほぼ同じですが、前回と違う点を簡単に書くと、、、

前回
指定した要素のクラスを追加したり、やめたりするもの
今回
指定した要素のクラス名を調べてクラス名を入れ替える

 

という感じです。最初に前回無駄なことをしていると言ったのは、id名含めてコード全体をevalにして、可変変数にしていた点です。今回のコードのように変数名を変えずに入れてしまえばそんなことしなくてもよかったわけです。

 

話がそれました。今回の説明に戻ります。

このようにクラス名を入れ替えるので、今回は表示と非表示の入れ替えですが、色を変える、大きさを変えることも可能ということです。

それでは、このJavascriptを使うためのHTML側の書き方です。

HTML
<!-- CSSでshow(表示)とhide(非表示)クラスを作成している前提です-->
 <a onclick="openclass(1)">きっかけの要素</a>
 <div id="window1" class="hide">
   <p>表示・非表示させるもの</p>
</div>

これが基本の使い方です。
<div>タグ内がきっかけの<a>タグをクリックするたびに表示・非表示になります。
class名やCSS内容を変えればアレンジできます。注意点はJavascript側とHTML側のid名をしっかり合わせることです。

仕組みを説明しますと、

HTML側のonclickというきっかけでJavascript側はopenclassというfunction名（関数名）のコードを実行します。その際にopenclass(1)のカッコ内の数字を使ってJavascriptでwindow1というid名を作ります。作ったid名のwindow1のHTMLで現在表示されているclassを調べてhideだったらshowに変更し、その逆だったら逆に変更するというわけです。

なのでHTML側からopenclass(2)とするとid名はwindow2となるわけです。

それがどうした？と思われるかもしれませんが、上で説明したHTMLの使い方をそのままもう一つコピーしてopenclass(2)とwindow2にするだけで別のウインドウが作れるというわけです。しかもJavascriptのコードはウインドウの数分増やさなくてもHTMLのカッコ内の数字を変えるだけで複数のウインドウが操作できるというわけです！！

 

久しぶりにまとめました。今は全く関係ない肉体労働系の仕事なのでしばらくコードを触ってなく、このまま知識が埋もれていく気がしますwwどんどん忘れていくww
そして、久しぶりに社会と関わって思ったのですが、ExcelVBAの知識のほうが重宝されますね。マクロで自動で作ったコードを見返してWith〜EndWithですっきりさせるだけでも感謝される。Mac使いの私からするとExcelは不安定で使えないものだったんですけどね。そのおかけでPHPとMySQLのスキルがあがったので感謝はしていますが、足を引っ張られた経験のほうが多いので脱Excel推進は大賛成です。それでもExcelVBAで困ったことをまとめてみてもいいなと思いました。次は思い出しながらVBAのことでも書こうかと思います。