jquery: глючный скрипт cookie? не всегда работает?

Question

Эй, ребята, что-то не так с моим сценарием.У меня есть div #searchbox и div # searchboxtrigger.

Довольно просто: #searchbox скрыт с дисплеем: нет.если щелкнуть на #searchboxtrigger, я скользю вниз #searchbox и сохраняю печенье.Если я снова нажму на #searchboxtrigger, #searchbox снова будет выдвигаться, и для файла cookie будет установлено значение null.

, поэтому я использую плагин jquery cookie.

onload Я проверяю, является ли файл cookieустановить, потому что если он установлен, #searchbox должен быть виден при загрузке страницы.если #searchbox снова проскальзывает и для файла cookie установлено значение null, я не хочу, чтобы он был видимым.

onload:

    if($.cookie('search_visible') == 'true'){
        $('#searchbox').show();
        console.debug('is visible');
    }else{ 
        $('#searchbox').hide();
        console.debug('is hidden');
    }

onclick:

$('#searchboxtrigger').click( function() {
    if($.cookie('search_visible') == 'true') {
        $('#searchbox').slideUp('fast');
        $.cookie('search_visible', null);
        console.debug('is hidden');
    } else {
        $('#searchbox').slideDown('fast');
        $.cookie('search_visible', 'true');
        console.debug('is visible');
    } 
});

Ребята, вы видите что-нибудь странное?иногда #searchboxtrigger просто не отвечает, и консоль запускается «скрыто» дюжину раз, пока я не перезагружаюсь.Есть ли что-нибудь, о чем я забыл подумать?

Answer 1

Просто прочитайте куки, чтобы получить начальный статус, и запишите его, когда статус изменится. Не используйте его для внутреннего состояния, для этого у вас есть переменная JavaScript.

Я бы также предложил сделать searchboxtrigger <a> вместо <div> и предварительно рассчитать элементы JQuery DOM, которые вы используете повторно.

Примерно так:

$(document).ready(function() {

    var searchVisible = $.cookie('search_visible') == 'true';
    var searchBox = $('#searchbox');

    if (searchVisible) {
        searchBox.show();
    } else { 
        searchBox.hide();
    }

    searchBox.click(function() {
        if (searchVisible) {
            searchBox.slideUp('fast');
            $.cookie('search_visible', null);
            searchVisible = false;
        } else {
            searchBox.slideDown('fast');
            $.cookie('search_visible', 'true');
            searchVisible = true;
        } 
        return false;
    });

});