Lokaler Speicher, wenn ein Kontrollkästchen angeklickt wurde

Question

So haben wir eine Kasse und an dieser Kasse, können Sie 2 Addons jetzt das Problem, das ich habe zu identifizieren ist, ob diese Optionen markiert sind oder nicht und zeigt die richtige Styling so lassen sag ich habe beide Optionen auf der Bezahlseite überprüft und dann abgebrochen es spart, dass sie überprüft werden aber zeigt nicht das Styling.

Meine ursprüngliche Lösung dafür war eine Var im lokalen Speicher zu speichern, wenn ein Addon geklickt wird und dann beim Laden der Seite, wenn der LocalSpeicher es enthält, dann den Stil auf das Addon anwenden, aber ich kann es scheinbar nicht bekommen gelten für beide nur für 1 siehe meine jQuery unten.

$(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

Ich glaube, das Problem in Ihrem if - elseif - else Block ist. Wenn addonooh in Ihrer localStorage aktiviert ist, wird die Ausführung in if (localStorage.getItem('addonooh') === "true") { gehen. Da Sie den Rest der Verzweigung mit else if und else verbunden haben, werden diese anderen Zweige nie ausgeführt.

Was Sie tun möchten, ist die Reihenfolge der Bedingungsprüfungen wie folgt ändern:

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 
} 

So kann man zunächst prüfen, ob die beiden Kontrollkästchen gesetzt sind. Ansonsten überprüfen Sie, ob nur eines der Kontrollkästchen gesetzt ist.

EDIT 1 Um Ihre local gelöscht zu haben, als ein Kontrollkästchen deaktivieren, das Bit-Code in Ihren click Handler des Kontrollkästchen ändern.

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

Beachten Sie, dass Sie nicht direkt Werte ändern sollten local wie Sie in Ihrer Frage gemacht haben, sondern sie dafür mit localStorage.setItem