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

Question

我有一个照片库，人们可以在其中 select 照片。如果他们 select 一张照片 class 将被添加，selected。我设置了一个 cookie，因此在页面重新加载时它会显示他们 selected 而不是 selected 的照片。 cookie 已设置，但不会读取它。这意味着如果我重新加载页面，none 将被 selected。

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 元素添加 unique 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 class，其 data-id 属性已存储在 cookie 中：

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

设置 .selectThis 点击事件。切换元素 class，创建一个新的选中项列表（数组）并将其存储在 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

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

Photo gallery css selected state not read by cookie

javascript

jquery

css

cookies