无需多次.hide（）调用即可使用JQuery隐藏DOM元素的最佳方法

Question

因此，一旦用户单击查看交易本身，我的网站就会使用Google Maps API来显示托管交易的公司的地图。 如果map函数返回true，我将使用$('#map').show()进行显示。

我知道当用户单击页面上的另一个按钮以隐藏div时可以使用.hide（），但是页面上大约有7个按钮可以执行不同的操作并使用$('#map').hide()每一种都是可行的，但似乎是重复且丑陋的编码方式。

当用户单击“查看交易”按钮以外的任何其他按钮.each()某种形式的.each()时，是否有人建议隐藏div？

Answer 1

我希望您的按钮共享相同的CSS：

$('.button').click(function(){
    $('#map').hide();
});

Answer 2

您可能有一个用于所有按钮的处理程序，该处理程序仅管理地图可见性，然后还有其他用于更具体内容的处理程序：

$('.button').click(function() {
    $('#map').toggle($(this).is('#the-map-button'));
});

$('#specific-button').click(function() {
    // specific stuff
    // map visibility will be taken care of elsewhere
});

Answer 3

您可以使用切换按钮而不是显示按钮：

$("#map").toggle();

如果正在显示，它将隐藏；如果被隐藏，将显示。

Answer 4

制作一个用于处理视图设置的JavaScript函数。 让每个按钮仅通过传入所需的视图来调用该函数。 然后，只需在代码中的某个位置（在该功能中），即可为新视图准备页面。 与每个按钮具有完全独立的代码相比，这可使您的所有代码干燥得多。

出于某种原因，jQuery事件处理程序常见的设计模式（声明匿名函数）倾向于使人们认为他们必须在每个事件处理程序中分别编写代码，而不是从执行大部分或全部操作的事件处理程序中调用共享函数。只需一处即可使用所有按钮。