Question

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

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

当用户点击“查看优惠”按钮旁边的任何其他按钮时，有没有人建议隐藏div，可能是某种形式的.each()？

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事件处理程序（声明匿名函数）相同的设计模式往往会让人们认为他们必须在每个事件处理程序中单独编写代码，而不是从大多数事件处理程序调用共享函数或者所有按钮的所有工作只在一个地方。

在没有多个.hide（）调用的情况下使用JQuery隐藏DOM元素的最佳方法

4 个答案: