Как добавить class к тегу с проверкой на повторное добавление?

Question

[Aison]

Привет ребят! сделал добавление класса к body по клику на тег с id, но при нажатии на morphsearch-close, class scroll-hidden не убирается.

$('#morphsearch').click(function(e){
	  e.stopPropagation();
	  $('body').addClass('scroll-hidden');
	});
    $('.morphsearch-close').click(function(){
		$('body').removeClass('scroll-hidden');
	});

вообще, хочу реализовать проверку на добавление class'a. получается, если я добавлю class, то при повторном нажатии на тот элемент, что его вызывает добавленный класс удаляется(

это работает с toggleClass.

как сделать так, чтобы при клике на #morphsearch к body добавился class scroll-hidden, если я кликаю на .morphsearch-close, то class scroll-hidden удалится?

требуется отключить прокрутку скролла в странице, когда вызывается div, который в последствии разворачивается на всю страницу и у него есть собственная прокрутка, в противном случае, получается две прокрутки))

p.s. хорошо, если предложенный Вами вариант будет на jaquery.

Comments

[Кот Фрейда]

.morphsearch-close это просто кнопка без действия?

[Aison]

Кот Фрейда, нет, у этой кнопки есть действие. вот код, в котором участвует эта кнопка.

(function() {
		var morphSearch = document.getElementById( 'morphsearch' ),
			input = morphSearch.querySelector( 'input.morphsearch-input' ),
			ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
			isOpen = isAnimating = false,
			// показать/спрятать область поиска
			toggleSearch = function(evt) {
					
				if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;

				var offsets = morphsearch.getBoundingClientRect();
				if( isOpen ) {
					classie.remove( morphSearch, 'open' );

					if( input.value !== '' ) {
						setTimeout(function() {
							classie.add( morphSearch, 'hideInput' );
							setTimeout(function() {
								classie.remove( morphSearch, 'hideInput' );
								input.value = '';
							}, 300 );
						}, 500);
					}
							
					input.blur();
				}
				else {
					classie.add( morphSearch, 'open' );
				}
				isOpen = !isOpen;
			};

		// события
		input.addEventListener( 'focus', toggleSearch );
		ctrlClose.addEventListener( 'click', toggleSearch );
		// Кнопка выхода 'esc', которая закрывает окно поиска
		// Обработка нажатия кнопки на клавиатуре
		document.addEventListener( 'keydown', function( ev ) {
			var keyCode = ev.keyCode || ev.which;
			if( keyCode === 27 && isOpen ) {
				toggleSearch(ev);
			}
		} );

		/***** for demo purposes only: don't allow to submit the form *****/
		morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
	})();

тут весь код

есть поиск(не мой) при нажатии на который, он разворачивается на весь экран(не fullscreen режим, просто на всю страницу) я хочу убрать полосы прокрутки у body на странице и оставить только вертикальную полосу прокрутки в самом div где поиск. а так их две, ода на поиске, а другая на самой странице, смотрится не красиво(

Answer 1

[FeST1VaL]

Насколько я понял .morphsearch-close находится так сказать в модальном окне, которого изначально на странице нету? Скорее всего у вас не вешается событие на клик, решить это можно примерно так

$('body').on('click', '.morphsearch-close', function() {
...
});

А с проверкой я нефига не понял, но проверять класс можно через

if($('body').hasClass('scroll-hidden')) {
...
}

Comments

[Aison]

нет, этот объект на странице есть. с помощью css скрыт.

там даже не модальное окно, просто div на всю ширину и высоту странице, по нажатии на кнопку.

тот самый поиск

[FeST1VaL]

Aison, А так у тебя эта область вся #morphsearch... ты по сути когда кликаешь по кнопке .morphsearch-close в это же время ты кликаешь по morphsearch и получается ты типо удаляешь класс и тут же вешаешь походу. Как вариант используй focus при клике в начале.

$('.morphsearch-input').focus(function(e){
  e.stopPropagation();
  $('body').addClass('scroll-hidden');
});

$('.morphsearch-close').click(function(){
  $('body').removeClass('scroll-hidden');
});

[Aison]

Артем Будин, сделал так. в условии того скрипта поиска добавил $( 'body' ).addClass( 'fancybox-active' );

else {
					classie.add( morphSearch, 'open' );
					$( 'body' ).addClass( 'fancybox-active' );
				}
				isOpen = !isOpen;

и сделал событие удаление класса для .morphsearch-close

$('.morphsearch-close').click(function(){
		$('body').removeClass('fancybox-active');
	});

колхозненько быть может, но в js не силён)

[FeST1VaL]

Aison, ну впрочем то пофиг как)) Ваш вариант по сути лучше тк не создается дополнительный клик, Я просто сделал из вашего примера кода) чтобы было понятнее)

[Aison]

Артем Будин, не знаете как можно вызвать этот поиск, не только через нажатие на morphsearch хочу повесить вызов поиска на кнопку) только не знаю как. если привязываю morphsearch к кнопке, то получается ошибка в var offsets = morphsearch.getBoundingClientRect();

?

текст ошибки в devtool chrome

Uncaught TypeError: morphsearch.getBoundingClientRect is not a function
at HTMLInputElement.toggleSearch

пишет, что для morphsearch.getBoundingClientRect нет функции, вроде так

[FeST1VaL]

Aison, ну как то так

1. Добавить например в codrops-header кнопку и присвоить id например header.
2. Добавить инициализацию в код js

header = document.getElementById('header'),
button = header.querySelector('div.button'),

3. Подписаться на эвент button.addEventListener('click', toggleSearch);