После того, как div закрыт/добавлен класс

Question

Я хочу добавить класс 'hidden' в div после того, как пользователь нажал, чтобы закрыть его. Мой код ниже устанавливает cookie в течение 7 дней, поэтому я хочу, чтобы этот класс был активным на тот момент. Это возможно? Надеясь это легко исправить

Мои JS:

jQuery(document).ready(function(){ 
    // if the cookie exist, hide the element 
    var hide = Cookies.getJSON('hide'); 

    if (hide && hide.element) 
     $(hide.element).hide(); 

    $('#hideshow').on('click', function(event) { 
     $('.following_prompt').addClass('hidden');  
     $('.following_prompt').hide(); 

     Cookies.set('hide', {element: '.following_prompt'}, { expires: 7 }); 
     return false; 
    }); 
}); 

Answer 1

Вы не должны использовать класс. Вы можете использовать .is (': visible'), но я создал пример, чтобы вы могли видеть, как будет выглядеть код для добавления/удаления класса.

jQuery(document).ready(function(){ 

    $('#hideshow').on('click', function(event) { 
     var $following_prompt = $('.following_prompt'); 
     if($following_prompt.is(":visible")) 
      $following_prompt.addClass('hidden').hide();  
     else 
     $following_prompt.removeClass('hidden').show(); 
     event.preventDefault(); 
    }); 
}); 

https://jsfiddle.net/5g67btrL/

Answer 2

Вы можете использовать вспомогательный класс, как: Small Cookies JavaScript Helper.

1. Загрузите файл js в https://raw.githubusercontent.com/tdd/cookies-js-helper/master/src/cookies.js на локальный.
2. Включить эту страницу в свой файл HTML, чтобы загрузить Small Cookies JavaScript Helper.

Пример использования:

jQuery(document).ready(function(){ 
    // if the cookie exist, hide the element 
    var hide = Cookie.get('hide'); 

    if (hide !== '') 
     $(hide).hide(); 

    $('#hideshow').on('click', function(event) { 
     $('.following_prompt').addClass('hidden');  
     $('.following_prompt').hide(); 

     Cookie.set('hide', '.following_prompt', { maxAge: 7*(3600*24) }); 
     return false; 
    }); 
});