本地存儲存儲如果複選框已被點擊

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