保存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 
});