Как отключить выполение js с сохранинием в куки?

Question

[Aleksander911]

Доброго дня всем. Имеется js, который передает событие при наведении на блок в карту Google:

$(".appartment").each(function(){
				var ap_id = $(this).attr("ap_id");				
				$(this).on("mouseenter", function() {					
					google.maps.event.trigger(Marker[ap_id], "click");
				});						
				});

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

Answer 1

[Immortal_pony]

$('input[type="checkbox"]').on('change', function() { 
    if ($(this).prop('checked')) { 
        $(".appartment").off('mouseenter');
        $.cookie('map-trigger-status', 'off'); // Библиотека для работы с cookies: https://github.com/carhartl/jquery-cookie
    }
});

Comments

[Aleksander911]

Спасибо. Только работает после установки чекбокса, а после перезагрузки, чекбокс опять снят, также после того как чекбокс убираю остановленная функция не работает. Не подскажите как сделать?

[Aleksander911]

Я тут уже начал экспериментировать с добавлением и удалением селектора, от которого работает или не работает функция. Но у вас сразу начинает работать , а у меня только после перезагрузки. Вот код
<input class="box" type="checkbox" name="1" />

$("input.box").each(function() {
				var mycookie = $.cookie($(this).attr("name"));
					if (mycookie && mycookie == "true") {
						$(this).prop("checked", mycookie);
					}
				   $(".row").toggleClass("on-infobox", this.checked); // добавляем on-infobox		 		   
				});
				$("input.box").change(function() {
					$.cookie($(this).attr("name"), $(this).prop("checked"), {
						path: "/",
						expires: 365
					});					
					 location.reload(); // перезагрузка страницы
					 
				});

Далее

$(".on-infobox .appartment").each(function(){ // если есть on-infobox, то функция выполняется
        var ap_id = $(this).attr("ap_id");				
        $(this).on("mouseenter", function() {					
          google.maps.event.trigger(Marker[ap_id], "click");
        });						
        });

[Immortal_pony]

Aleksander911, перед тем как добавлять отбработку события "mouseenter", проверяйте значение cookie.

[Aleksander911]

Immortal_pony: Можете написать ваш вариант проверки?

[Immortal_pony]

// Функция для инициализации триггера
function initTrigger() {
    $(".appartment").each(function() {
        var ap_id = $(this).attr("ap_id");	
        			
        $(this).on("mouseenter", function() {					
          google.maps.event.trigger(Marker[ap_id], "click");
        });						
    });	
}

// Функция для удаления триггера
function removeTrigger() {
    $(".appartment").off('mouseenter');
}



// Обработка при загрузке страницы
$(function() {
    var triggerShouldBeInit = Boolean($.cookie('map-trigger-status'));

    if (triggerShouldBeInit) {
        initTrigger();
    }



    // Обработка события изменения чекбокса
    $('input[type="checkbox"]').on('change', function() { 
        var isChecked = $(this).prop('checked');
        
        isChecked ? removeTrigger() : initTrigger(); // Включение или отключение триггеров в зависимости от статуса чекбокса
        $.cookie('map-trigger-status', !isChecked); // Запись в статус значения, обратного состоянию чекбокса.
    });
});

[Aleksander911]

Что то пошло не так, теперь только при первой загрузке не выполняется

$(".appartment").each(function() {
        var ap_id = $(this).attr("ap_id");	
        			
        $(this).on("mouseenter", function() {					
          google.maps.event.trigger(Marker[ap_id], "click");
        });						
    });

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

[Immortal_pony]

Aleksander911,

Что то пошло не так, теперь только при первой загрузке не выполняется

Надо тогда немного изменить условие, чтобы выполнялось:

var triggerShouldBeInit = $.cookie('map-trigger-status') == undefined || $.cookie('map-trigger-status');

Для проставления состояния чекбокса при загрузке также необходимо написать код.

// Инициализация состояния чекбокса
    $('input[type="checkbox"]').prop('checked', !triggerShouldBeInit);

[Aleksander911]

Immortal_pony: а куда ставить?

$('input[type="checkbox"]').prop('checked', !triggerShouldBeInit);

Ставлю его после var triggerShouldBeInit ... но не работает

[Immortal_pony]

Ох уж это преобразование типов в JS. Вот так можно:

var triggerShouldBeInit = $.cookie('map-trigger-status') == undefined || $.cookie('map-trigger-status') == 'true';

[Aleksander911]

Огромнейшее вам спасибо!!! Как я вас могу отблагодарить??!! Напишите мне на почту реквизиты вашей карты! [e-mail]
Только еще небольшой вопрос: как заставить выполняться не только просто после загрузки страницы, но и после ajax загрузки другой страницы?

[Immortal_pony]

Aleksander911, достаточно пметить ответ как решение.

:как заставить выполняться не только просто после загрузки страницы,

Используйте функции initTrigger/removeTrigger, а также изменение сотояния чекбокса в success-функции AJAX-кода.

[Aleksander911]

Вот сам ajax

function reloadApartmentList(url) {
    $.ajax({
        type: 'GET',
        url: url,
        /*data: {is_ajax: 1},*/
        ajaxStart: UpdatingProcess(resultBlock, updateText),
        success: function (msg) {
            history.pushState( {callFrom: 'reloadApartmentList', path: url, response: msg}, null, url);

            $('div.main-content-wrapper').html(msg);
            $('div.rating > span > input').rating({'readOnly': true});

			// smooth scroll to
			var dest=0;
			if($("#appartment_box").offset().top > $(document).height()-$(window).height()){
				dest=$(document).height()-$(window).height();
			}else{
				dest=$("#appartment_box").offset().top;
			}
			$("html,body").animate({scrollTop:dest}, 500,"swing");


            $('#update_div').remove();
            $('#update_text').remove();
            $('#update_img').remove();
			$("input.box").each(function() {
				var mycookie = $.cookie($(this).attr("name"));
					if (mycookie && mycookie == "true") {
						$(this).prop("checked", mycookie);
					}				     
				});

        }
    });
}

[Aleksander911]

Immortal_pony: С ajax разобрался. Вы потратили на меня время, так всё понятно разъяснили, теперь дайте, пожалуйста мне реквизиты, за такую работу я просто обязан заплатить.

[Immortal_pony]

Aleksander911, считайте это новогодним подарком).

[Aleksander911]

Immortal_pony: Но с ajax что-то не очень получилось... Спасибо! Вас тоже с наступающим Новым Годом! Счастья, здоровья вам!