Блог

Итак, я создал свой скрипт jquery для переключения файлов cookie, но он не работает. Например, когда я нажимаю на триггер, ничего не происходит.

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

 jQuery(document).ready(function ($) {
if ($.cookie('t4hidden')) {
    $('#top4hide').hide();
}
$("#top4trigger").click(function () {
    $("i",this).toggleClass("fa fa-chevron-up fa fa-chevron-down")
    $("#top4hide").toggle("blind");
});
$("#top4trigger").click(function() {
    if ($("#top4hide").is(":hidden")) {
    $.cookie("t4hidden", "foo");
} else {
    $.removeCookie("t4hidden");
}
});
  

jsfiddle:http://jsfiddle.net/P2dy8 /

Основная проблема здесь — это время. В вашем коде есть два обратных вызова по щелчку мыши: один для переключения отображения элемента, а другой для установки файла cookie. Вы не можете контролировать, какой из них запускается первым, но даже если бы вы могли, это не помогло бы. Первый обратный вызов скрывает элемент с анимацией, поэтому, когда запускается второй обратный вызов, элемент все еще виден. Ваша проверка на $('#top4hide").is(":hidden") всегда возвращает false, потому что независимо от того, когда она выполняется — первой или второй — она все еще видна во время.

К счастью, вы можете передать второй параметр в jQuery toggle() — функцию, которая запускается по завершении анимации. Проверяя видимость элемента после анимации, мы можем правильно установить значение cookie. Я опубликовал некоторый рабочий код в JSFiddle, а также ниже; он также переключает ваш шеврон при скрытии div в pageload, если установлен файл cookie. (Для получения и вам потребуется $.cookie() загрузить плагин jQuery cookie $.removeCookie() .)

 $(function() { // $() is an alternative syntax for $(document).ready()
    if ($.cookie('t4hidden')) { // Update page if cookie is set
        $('#top4hide').hide();
        $('#top4trigger i').toggleClass('fa-chevron-up fa-chevron-down');
    }

    $("#top4trigger").click(function() { // Click handler for link
        $("i", this).toggleClass("fa-chevron-up fa-chevron-down")
        $("#top4hide").toggle("blind", function () { // Set/delete cookie after animation complete
            if ($("#top4hide").is(":hidden")) {
                $.cookie("t4hidden", "foo");
            } else {
                $.removeCookie("t4hidden");
            }
        });
    });
});