アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

要素の表示・非表示を切り替える

個人的に開発作業をするときは、
非表示用のクラスを定義しておいて、そのクラスを追加削除することで対応しています。

CSS ※AdminLTEなんかだと、同様の定義が元から含まれています

.hidden {
    display: none;
}

HTML

<div class="hidden">
  ここは表示されない
</div>
<div>
  ここは表示される
</div>

jQuery

// 対象の要素をobjとして…
var obj = $(" ... ");

// 非表示にする
obj.addClass("hidden");

// 表示する
obj.removeClass("hidden");

// 非表示・表示を切り替える
obj.toggleClass("hidden");

// 表示か非表示かの判定
if (obj.hasClass("hidden")) { /* 非表示である */ }
else { /* 非表示でない */ }


最初はこういうの↓を参考にしていたのですが、クラスの追加削除で済ませる方がシンプルだなと思いまして…。
jQueryで要素の表示・非表示を判定する方法: 小粋空間


まとめていて気付きましたが、
jQuery部分は共通関数にしてしまってもいいかもしれませんね。

function displayOn(obj){
    obj.addClass("hidden");
}
function displayOff(obj){
    obj.removeClass("hidden");
}

// 呼び出すときはこんな感じで済む
displayOn($(" ... "));