Фотогалерея css выбранное состояние не прочитано cookie

Question

У меня есть фотогалерея, где люди могут выбрать фото. Если они выберет фотографию, будет добавлен класс. Я установил файл cookie, поэтому на странице reload он отобразит выбранную фотографию и не будет выбран. Файл cookie устанавливается, но он не читает его. Значение, которое не будет выбрано, если я перезагружу страницу.

HTML:

<div class="ele cat_collection" data-category="collection"> 
    <div class="thumbnail paper-shadow"> 
     <div class="hover-menu-container"> 
     <div class="hover-menu"> 
      <ul> 
       <li><a class="btn-cmd btn-concrete selectThis" href="#"><i class="fi fi-check"></i></a></li> 
       <li><a class="btn-cmd btn-concrete read-this" href="#" data-target=".R1"><i class="fi fi-pencil-cap"></i></a></li> 
      </ul> 
     </div> 
     <div class="thumb-image"></div> 
    </div> 
    </div> 
</div> 

JavaScript:

$(document).ready(function() { 
    var body_class = $.cookie('selected'); 
    if(body_class) { 
     $(this).closest('.ele').attr('class', body_class); 
    } 

    $('.selectThis').on('click', function() { 
     var container = $(this).closest('.ele'); 
     container.toggleClass('selected'); 
     $.cookie('selected', $(this).closest('.ele').attr('class'), { expires: 365, path: '/'}); 
    }); 
});    

Answer 1

Вызов if(body_class) { $(this) ... в вашем случае, вы имеете в виду document. Вы должны обратиться к элементу, содержащему фотографию, которая была нажата.

Примечание: сохранение одного значения selected в cookie не позволит вам проверить, какой элемент был выбран. Вы должны сохранить список (массив) выбранных элементов и идентифицировать каждый из них атрибутом (либо id, либо data). Определение атрибутов должны быть уникальными для каждого элемента

Добавить уникальный атрибутdata-id для каждого элемента .ele:

<div class="ele cat_collection" data-id="1" data-category="collection"> 
    ... 
</div> 
<div class="ele cat_collection" data-id="2" data-category="collection"> 
    ... 
</div> 
... 

Проверьте, печенье существует. Если это произойдет, разделить его значение запятой (как она должна содержать список выбранных элементов в форме: 1,2,3,...), или установить пустой массив, если куки не существует:

var classesArray = $.cookie('selected') ? $.cookie('selected').split(',') : []; 

Loop по списку печенья и добавить selected класс только для этих .ele элементов, у которых атрибут data-id были сохранены в куки:

$.each(classesArray, function(k, v) { 
    $('.ele[data-id="'+v+'"]').addClass('selected'); 
}); 

Установить на .selectThis нажмите событие. Переключение класса элементов, сделать новый выбранный список пунктов (массив) и сохранить его в куки:

$('.selectThis').on('click', function() { 
    // toggle class: 
    $(this).closest('.ele').toggleClass('selected'); 
    // make a new list of selected elements: 
    classesArray = []; 
    $('.ele.selected').each(function(){ 
     classesArray.push($(this).data('id')); 
    }); 
    // store the new list of selected elements in the cookie: 
    $.cookie("selected", classesArray.join(','), { expires: 365, path: '/'}); 
}); 

DEMO