本地存储存储如果复选框已被点击

Question

因此，我们有一个结帐和结帐，你可以选择2个插件，现在我似乎遇到的问题是确定这些选项是否打勾或显示正确的样式，所以让我们说我检查了两个选项到付款页面，然后取消它保存，他们被检查，但不显示样式。

我的初步修复是为了在单击插件时在localstorage中保存var，然后在页面加载时（如果localstorage包含它），然后将样式应用于插件，但是我似乎无法获得它适用于它将只适用于1请参阅下面我的jQuery。

$(function() { 

    addonClass = function(e) { 
     $(e).toggleClass("addon-active"); 
     $(e).find("label .add").toggle(400); 
     $(e).find("label .added").toggle(800); 
     if ($(window).width() < 600) { 
      $(e).find("label .fiver").toggle(400); 
     } 
    } 

    if (localStorage.getItem('addonooh') === "true") { 
     addonClass('.first'); 
     $('.first').find('.add, .fiver').hide(); 
     $('.last').find('.fiver').show(); 

    } else if (localStorage.getItem('addon') === "true") { 
     addonClass('.last'); 
     $('.last').find('.add, .fiver').hide(); 
     $('.first').find('.fiver').show(); 

    } else if (localStorage.getItem('addonooh') === "true" && localStorage.getItem('addonvm') === "true") { 
     addonClass('.first, .last'); 
     $('.first, .last').find('.fiver').show(); 

    } else { 
    } 

    if ($(window).width() > 600) { 
     $(".additional-features__item").hover(function() { 
      $(this).toggleClass("addon-active-hover"); 
      $(this).find("label .fiver").stop(true, true).toggle(400); 
      $(this).find("label .add").stop(true, true).toggle(800); 
      if ($(this).hasClass('addon-active')) { 
       $(this).find("label .fiver, label .add").hide(); 
      } 
     }); 
    } 

    if ($(window).width() < 600) { 
     $(this).find("label .add").remove(); 
    } 

    $(".additional-features__item").click(function() { 

     if ($(this).hasClass('first')) { 
      localStorage.addonooh = 'true'; 
     } else { 
      localStorage.addonvm = 'true'; 
     } 


     if ($(this).hasClass('.first') && ($(this).hasClass('.addon-active'))) { 
      localStorage.addonooh = ''; 
     } else if ($(this).hasClass('.last') && ($(this).hasClass('.addon-active'))) { 
      localStorage.addonvm = ''; 
     } 

     addonClass(this); 
     var checkbox = $(this).find(".mobile-answering__standard-feature"); 
     checkbox.prop('checked', !checkbox.prop('checked')); 
    }); 
}); 

Answer 1

我相信问题出在您的if - elseif - else区块。如果您的localStorage中检查到addonooh，则执行将在if (localStorage.getItem('addonooh') === "true") {中执行。既然你有其他的分支连接else if和else，那些其他分支将永远不会被执行。

你想要做的是改变条件检查的顺序是这样的：

if (localStorage.getItem('addonooh') === "true" && localStorage.getItem('addonvm') === "true") { 
    addonClass('.first, .last'); 
    $('.first, .last').find('.fiver').show(); 
} else if (localStorage.getItem('addonooh') === "true") { 
    addonClass('.first'); 
    $('.first').find('.add, .fiver').hide(); 
    $('.last').find('.fiver').show(); 

} else if (localStorage.getItem('addon') === "true") { 
    addonClass('.last'); 
    $('.last').find('.add, .fiver').hide(); 
    $('.first').find('.fiver').show(); 
} else { 
    // dont care 
} 

你第一次检查，如果两个复选框都设置这样。 否则您检查是否只设置了其中一个复选框。

编辑1 为了有你的localStorage清理取消选中复选框时，改变的代码位在click处理程序的复选框。

if ($(this).hasClass('first')) { 
    localStorage.setItem("addonooh", $(this).prop('checked')); 
} else { 
    localStorage.setItem("addonvm", $(this).prop('checked')); 
} 

请注意，你不应该直接修改localStorage的值，你在你的问题都做了，而是与localStorage.setItem