Лучший способ скрыть элемент DOM с помощью JQuery без нескольких вызовов .hide ()

Question

Таким образом, мой сайт использует API Карт Google для отображения карты компании, на которой размещена сделка, когда пользователь щелкает, чтобы просмотреть саму сделку.Если функция карты возвращает true, я пользователь $('#map').show(), чтобы отобразить его.

Я знаю, что могу использовать .hide (), когда пользователь нажимает другую кнопку на странице, чтобы скрыть div, но у меня есть около 7кнопки на странице, которые делают разные вещи и используют $('#map').hide() в каждой из них, выполнимы, но кажутся повторяющимися и уродливыми.

Есть ли у кого-нибудь предложения, как скрыть div, когда пользователь нажимает на любую другую кнопку, кроме кнопки «Просмотр сделки», может быть, какая-то форма .each()?

Answer 1

Вы можете иметь обработчик для всех кнопок, который управляет только видимостью карты, а затем другие обработчики для более специфических вещей:

$('.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 2

Вы можете использовать переключатель вместо кнопки показа:

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

если он отображается, он будет скрыт, а если он скрыт, он будет показан.

Answer 3

Я надеюсь, что ваши кнопки используют один и тот же CSS:

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

Answer 4

Создайте одну функцию javascript, которая обрабатывает настройку вашего вида. Пусть каждая кнопка вызывает эту функцию, просто передавая желаемое представление. Затем, только в одном месте вашего кода (в этой функции) вы можете подготовить страницу к новому представлению. Это позволяет сделать весь ваш код намного более СУХИМ, чем иметь совершенно отдельный код для каждой кнопки.

По какой-то причине шаблон проектирования, общий для обработчиков событий jQuery (объявляющих анонимные функции), заставляет людей думать, что им нужно иметь отдельно написанный код в каждом обработчике событий, а не вызывать разделяемую функцию из обработчика событий, который выполняет большинство или вся работа для всех ваших кнопок в одном месте.