重构jQuery / JavaScript代码以显示/隐藏大量模态窗口

Question

I have many of these functions at the moment:

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

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

The trouble is that I have about 10 of these functions and it looks clumsy. Is there some more elegant way to do this sort of thing?

Many thanks.

Answer 1

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

Answer 2

If all the functions look like same, you can do something like this

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

And call this like:-

toggleModal('modal', 'foo');

Answer 3

您可以用一行替换这些函数，如下所示：

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

Answer 4

Hand the selector as an argument to the function.

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

show('#bar');

Now you can hand over a selector string or a jquery object. Moving the # into the function is not recommended because that would be less reusable and more fragile, but that depends on your usecase.

show('bar');

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

If the class .modal is subject to change, you may want to modify the function even further and hand the selector for the modal as a second (optional) parameter.

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

This way you can hand over a selector for the modal, but it will take the default if no parameter for the modal is handed over.