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

您可以用一行代替这些功能，如下所示：

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

Answer 4

将选择器作为函数的参数。

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

show('#bar');

现在您可以移交选择器字符串或jquery对象。建议不要将#移动到函数中，因为这样做的可重用性更低且更脆弱，但这取决于您的用例。

show('bar');

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

如果类.modal可能会发生变化，您可能需要进一步修改该函数，并将模态的选择器作为第二个（可选）参数传递。

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

这样你可以移交模态的选择器，但是如果没有移交模态的参数，它将采用默认值。

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

4 个答案: