javascript - 多数のモーダル ウィンドウを表示/非表示にするための jQuery/JavaScript コードのリファクタリング

Question

私は現時点でこれらの機能の多くを持っています:

function show_foo() {
   $('.modal').hide(); // hide all modals
   $('#foo').show(); // show the foo modal
}

function show_bar() {
   $('.modal').hide();
   $('#bar').show();
}

問題は、これらの関数が約 10 個あり、ぎこちなく見えることです。この種のことを行うためのよりエレガントな方法はありますか?

どうもありがとう。

Answer 1

function hideModalAndShow(id) {
   $('.modal').hide();
   $('#' + id).show();
}

Answer 2

すべての機能が同じように見える場合、次のようなことができます

function toggleModal(classToHide, idToShow) {
   $('.' + classToHide).hide(); // hide all modals
   $('#' + idToSHow).show(); // show the foo modal
}

そして、これを次のように呼び出します:-

toggleModal('modal', 'foo');

Answer 3

セレクターを引数として関数に渡します。

function show(selector) {
   $('.modal').hide();
   $(selector).show();
}

show('#bar');

これで、セレクター文字列または jquery オブジェクトを渡すことができます。を関数に移動する#ことは、再利用性が低く壊れやすいためお勧めしませんが、ユースケースによって異なります。

show('bar');

$('#' + selector).show();

クラス.modalが変更される可能性がある場合は、関数をさらに変更して、モーダルのセレクターを 2 番目の (オプションの) パラメーターとして渡すことができます。

function show(selector,modal) {
   $(modal?modal:'.modal').hide();
   $(selector).show();
}

このようにして、モーダルのセレクターを渡すことができますが、モーダルのパラメーターが渡されない場合はデフォルトが使用されます。

Answer 4

これらの関数は、次のように 1 行で置き換えることができます。

$('.modal').hide().filter('#bar').show();