チェックボックスがオンの場合、ローカルストアストア

Question

チェックアウトがあり、そのチェックアウトで2つのアドオンを選択できるようになりました。問題が発生しているように見える場合は、これらのオプションが有効かどうかを確認して、両方のオプションが支払いページに表示されていることを確認した後、キャンセルされたことを確認して、チェックされていますが、スタイリングは表示されません。

私の最初の修正は、アドオンがクリックされたときにlocalstorageにvarを保存してから、localstorageにそれが含まれていてaddonにスタイリングを適用した場合にページをロードすることでしたが、両方に適用されるのは、以下の私の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 
} 

この方法：あなたが何をしたいか

は、このような条件のチェックの順序を変更しています。 それ以外の場合はチェックボックスのいずれかが設定されているかどうかを確認します。

EDIT 1 あなたのlocalStorageは、チェックボックスをオフにする場合、チェックボックスのごclickハンドラ内のコードのビットを変更クリア持つために。あなたは、あなたの質問に行ったように、直接のlocalStorage値を変更するのではなく、これは私がいる問題のみを作業それのほとんどを持っている。このためlocalStorage.setItem