要素の表示・非表示を切り替える
個人的に開発作業をするときは、
非表示用のクラスを定義しておいて、そのクラスを追加削除することで対応しています。
CSS ※AdminLTEなんかだと、同様の定義が元から含まれています
.hidden { display: none; }
HTML
<div class="hidden"> ここは表示されない </div> <div> ここは表示される </div>
// 対象の要素を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($(" ... "));