Cookie無法讀取照片庫CSS選擇狀態

Question

我有一個照相館，人們可以在其中選擇照片。 如果他們選擇照片，則將添加一個班級，然后選擇。 我設置了一個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 click事件。 切換元素類，創建一個新的選定項目列表（數組）並將其存儲在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: '/'});
});

演示