使用 JQuery 隐藏 DOM 元素而无需多次调用 .hide() 的最佳方法

Question

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

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

当用户单击“查看交易”按钮之外的任何其他按钮（可能是某种形式的 .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 事件处理程序（声明匿名函数）常见的设计模式往往使人们认为他们必须在每个事件处理程序中单独编写代码，而不是从执行大部分或全部操作的事件处理程序中调用共享函数。只需一处即可操作所有按钮。