保存CSS狀態Jquery Cookie

Question

我一直在試圖實現一種方法來保存點擊每個項目時添加的CSS類。我不知道如何去做，因爲每個項目都有不同的ID。這個想法是，用戶可以重新訪問一個頁面，並仍然選擇他們的項目。我試圖查找其他的例子，但大多數只涉及保存身體CSS而不是一個ID數組。我嘗試使用JQuery Cookie但無濟於事，任何幫助將不勝感激。

$('.select_it, .myState').on('click', function(e) { 
       var id = $(this).attr('id'); 
       isRadio = $(this).data('status'); 


       if(isRadio) { 
        if ($(this).hasClass('myState')) { 
         $(this).removeClass('myState'); 
        } else { 
         $('.select_it').removeClass('myState'); 
         $(this).addClass('myState'); 
        } 

        $('.nextbutton').fadeTo("slow", 1.0, function() { 
        }); 

        jsRoutes.controllers.Builder.selectedOption(id).ajax({ 
         success : function(data) { 
         } 
        }); 
       } else { 
        $('.nextbutton').fadeTo("slow", 1.0, function() { 

        }); 
        $(this).toggleClass('myState'); 

        jsRoutes.controllers.Builder.selectedOption(id).ajax({ 
         success : function(data) { 
         } 
        }); 
       } 
      }); 

解決方案：

var state = {}; 
      $('.nextbutton').click(function() {return false;}); 
      if (localStorage.getItem("state") === null) { 
       // 
      } else { 
       $('.nextbutton').fadeTo("slow", 1.0, function() { 
        $('.nextbutton').unbind('click'); 
       }); 
       state = JSON.parse(localStorage["state"]); 
      } 


      $('.select_it, .myState').each(function(i, obj) { 
       if(state[obj.id] == 'myState') { 
        $(this).addClass('myState'); 
       } 
      }); 

      $('.select_it, .myState').on('click', function(e) { 
       var id = $(this).attr('id'); 
       isRadio = $(this).data('status') 

       if(isRadio) { 

        $('.nextbutton').fadeTo("slow", 1.0, function() { 
         $('.nextbutton').unbind('click'); 
        }); 


        $('.myState').each(function(index, element){ 
         $(this).removeClass('myState'); 
         $(this).addClass('select_it'); 
         state[element.id]='select_it'; 
        }); 

        $(this).addClass('myState'); 
        state[id]='myState'; 

        jsRoutes.controllers.Builder.selectedOption(id).ajax({success : function(data) {}}); 

       } else { 

        if ($(this).hasClass('select_it')) { // TOGGLE ON 
         state[id]='myState'; 
         $(this).removeClass('select_it'); 
         $(this).addClass('myState'); 
        } else {        // TOGGLE OFF 
         state[id]='select_it'; 
         $(this).removeClass('myState'); 
         $(this).addClass('select_it'); 
        } 
        jsRoutes.controllers.Builder.selectedOption(id).ajax({success : function(data) {}}); 
       } 

       localStorage['state'] = JSON.stringify(state); 
      }); 

Answer 1

cookie只能保存一個字符串。我還會考慮使用localStorage而不是cookie ......並將cookie用作不支持localStorage的舊瀏覽器的後備。

如果使用元素ID作爲鍵創建對象，則可以使用JSON.stringify創建字符串以存儲並使用JSON.parse將字符串再次轉換爲對象。

/* example populated object, only need an empty object to start*/ 
var ui_state={ 
    ID_1:'someClass', 
    ID_2:'inactiveClass' 
} 

然後內的事件處理程序：

$('#ID_1').click(function(){ 
    var newClass= /* logic to dtermine new class*/ 
    $(this).addClass(newClass);   
    storeStateToLocal(this.id, newClass); 
}); 
/* simplified store method*/ 
function storeStateToLocal(element_id, newClass){ 
    ui_state[element_id]= newClass;/* update ui_state object*/ 
    if(window.locaStorage != undefined){ 
      localStorage.setItem('ui_state', JSON.stringify(ui_state)); 
    }else{ 
     /* stringify to cookie*/ 
    }   
} 

在頁面加載可以遍歷對象：

var ui_state= getStateFromLocal();/* if none in storage, return false*/ 
if(ui_state){ 
    $.each(ui_state,function(element_id, currClass){ 
     $('#'+element_id).addClass(currClass); 
    }); 
}else{ 
    ui_state={};/* create empty object if none already in storage*/ 
} 

Answer 2

嗯，不是100％肯定，但它是這樣的，你想要什麼？

$('.select_it').each(function(){ 
    if ($(this).attr('id') != $.cookie(cookieName)) { 
     $(this).removeClass('myState'); 
    } else { 
     $(this).addClass('myState'); 
    } 
}); 

或者更多這樣的：

$('.select_it, .myState').on('click', function(e) { 
    $('.select_it').removeClass('myState'); 
    $(this).addClass('myState'); 

    // more code 
});