jQueryでグループごとに表示非表示を行うエレガントな方法

Question

###前提・実現したいこと
ボタン押下や処理後に画面をころころと変えていきたい場合、jQueryでどのように実装するか考えています。

###考えていること。

$('#hoge1').hide();
$('#hoge2').show();
$('#hoge3').hide();
$('#hoge4').hide();

などと、idを指定してやればできるのですが、何かもっとエレガントな方法はないでしょうか。
グループにすべてクラスをつけて.$('.piyo').hide();にして、id部分だけshowが一番エレガントでしょうか。

###補足情報(言語/FW/ツール等のバージョンなど)
イベントごとに変わったりするので、1つだけを表示させて、他は非表示的な感じです。

Comments

[kei344]

HTMLの構造しだいなので、例示してください。

[nanamin]

htmlの構造はdivかliで作るかどちらにしようか迷っています。どちらでも構いません。

Answer 1

私の場合、操作に応じたページ移動の実現のために、こういうコードを書いています。
基本的に、全ページをグループとして一括非表示して、その後に指定ページを表示するのですが、その前後に、そのページの更新用メソッドを呼び出しています。
updateとshowの2種類があるのは、私はSwiperというスライダーライブラリを利用しているからです。

<div class="page" id="index" style="display:none;">
	<header></header>
	<div class="main">
		<button data-page="news">ニュース</button>
		<button data-page="order">注文</button>
	</div>
	<footer></footer>
</div>

<div class="page" id="news" style="display:none;">
	<header></header>
	<div class="main"></div>
	<footer></footer>
</div>

<div class="page" id="order" style="display:none;">
	<header></header>
	<div class="main"></div>
	<footer></footer>
</div>

<script>
// ページ総合制御オブジェクト
var pages = {};

// ページ遷移設定
var Page = function(page){
	$(".page").hide();
	pages[page] && pages[page].update && pages[page].update();// そのページの設定があるときだけメソッドを呼び出す
	$("#" + page).show();
	pages[page] && pages[page].show && pages[page].show();
};
$(".page").on("click","[data-page]",function(){
	Page($(this).data("page"));
});

pages.index = {};
pages.index.update = function(){
	// そのページ内のinput要素の調整など
}
pages.index.show = function(){
	// SwiperのonResizeメソッドは表示後じゃないと正常動作しない
}

Page("index");//最初はindexを表示
// newsページを表示させたいならPage("news");

</script>

この構成なら、HTML側でページや移動先リンクを増やしたとしても、特にjavascriptを変更せずともとりあえずは動作しますので、メンテナンスが楽にできます。

Comments

[nanamin]

なるほど。オブジェクトを作って、呼び出された時だけメソッドを実行する感じですか。
これいいですね。わかりました。ありがとうございます。