照片库css所选状态未被cookie读取

Question

我有一个照片库，人们可以在其中选择照片。如果他们选择了一张照片，则会添加一个类别，并进行选择。我设置了一个cookie，这样在页面重新加载时，它会显示他们选择和未选择的照片。cookie已设置，但它不会读取它。这意味着如果我重新加载页面，将不会选择任何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。您应该参考包含已单击的照片的元素。

注意：在cookie中存储单个selected值不会让您检查选择了哪个元素。您应该存储一个选定元素的列表（数组），并通过一个属性（通过id或data）来标识每个元素每个元素的标识属性必须是唯一的

为每个.ele元素添加唯一data-id属性：

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

检查cookie是否存在。如果是，请用逗号分隔其值（因为它应该包含形式为1,2,3,...的选定元素列表），或者如果cookie不存在，则设置一个空数组：

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

循环浏览cookie列表，并仅为这些.ele元素添加selected类，这些元素的data-id属性已存储在cookie中：

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

设置.selectThis点击事件。切换元素类，制作一个新的选定项目列表（数组）并将其存储在cookie中：

$('.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