JS. Скрипт некорректно работает во втором запуске. Чего не хватает в коде?

Question

[Вадим Тимошенко]

На сайте есть кнопка 'button.map-open'. Она открывает карту проезда. Также есть кнопка, которая эту карту скрывает (та же самая, только с другим классом). Первый запуск (клики на кнопках) срабатывают корректно. После второго "открытия карты" карта появляется и сразу исчезает.

В JS и JQuery шарить только начинаю. Решил бы проблему наверное сам, не знаю в какую сторону копать и что спросить у гугла (Ok, Google... эм... э.. =) ) Подскажите чего в коде не хватает. Или что читать по теме. Спасибо.

mapOpen = $('button.map-open');
		
		mapOpen.click(function() {
			$('#map').fadeIn('400');
			$('body, html').animate({'scrollTop':5000},600);
			mapOpen.text('закрыть схему проезда');
			mapOpen.addClass('map-close').removeClass('map-open');
			
			mapClose = $('button.map-close');
			mapClose.click(function() {
				$('#map').fadeOut('400');
				mapClose.text('открыть схему проезда');
				mapClose.addClass('map-open').removeClass('map-close');
			});
		});

Answer 1

[_ _]

$('button.map-open').click(function() {
  var btn = $(this);
  if(btn.hasClass('map-open')){
    $('#map').fadeIn('400');
    $('body, html').animate({'scrollTop':5000},600);
    btn.text('закрыть схему проезда');
    btn.addClass('map-close').removeClass('map-open');    
  }else{    
    $('#map').fadeOut('400');
    btn.text('открыть схему проезда');
    btn.addClass('map-open').removeClass('map-close');  
  }
});

Answer 2

[Алексей Lepshiz]

А вы попробуйте структурировать код чуть более читабельным способом, тем более пока учитесь. Для примера:

(function(){

	var someParentElement = $('.some-selector');
	if(!someParentElement.length) return;

	var $mapElement = $('#map'),
		$mapOpenBtn = someParent.find('button.map-open'),
		$mapCloseBtn = someParent.find('button.map-close'),
		
		TXT_OPEN = 'открыть схему проезда',
		TXT_CLOSE = 'закрыть схему проезда';
		
		function closeMap(){
			$mapElement.fadeOut(400);
			$mapCloseBtn.text(TXT_OPEN);
			mapCloseBtn.addClass('map-close').removeClass('map-open');
		}
		
		function openMap(){
			$mapElement.fadeIn(400);
			$mapCloseBtn.text(TXT_CLOSE);
			$mapCloseBtn.addClass('map-open').removeClass('map-close');
		}
		
		mapOpenBtn.click(openMap);
		mapCloseBtn.click(closeMap);
})();

И вы легко сможете понять где у вас проблемы.

Answer 3

[Alex Pts]

Правильно так

mapOpen = $('button.map-open');
mapOpen.click(function() {
			$('#map').fadeIn('400');
			$('body, html').animate({'scrollTop':5000},600);
			mapOpen.text('закрыть схему проезда');
			mapOpen.addClass('map-close').removeClass('map-open');
		});

mapClose = $('button.map-close');
 mapClose.click(function() {
				$('#map').fadeOut('400');
				mapClose.text('открыть схему проезда');
				mapClose.addClass('map-open').removeClass('map-close');
			});

У вас обработчик закрытия каждый раз устанавливался при клике открыть

Answer 4

[Alexander Kaloshin]

Самое банальное решение повесить 2 различных обработчика.
Не очень хорошо загонять создание обработчика в теле другого обработчика. Я сходу не разглядел причину, но постоянно вешать событие, не очень хорошо.

Советую так же проверить удаляется ли класс 'map-close'.
Успехов)

Answer 5

[Вадим Тимошенко]

Один обработчик засунул в другой потому, что когда они отдельно (не друг в друге) функция закрытия совсем не работает. Хотя класс map-close присваивается. (ошибок debuger тоже не бывает).