Ankündigung

Einklappen
Keine Ankündigung bisher.

Inhalt per Checkbox ein/ausblenden und per Cookie speichern

Einklappen

Google Responsive Ad

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Inhalt per Checkbox ein/ausblenden und per Cookie speichern

    Hallo Community,

    ich möchte für meine Seite (www.sprts.de, WORDPRESS) Inhalte per Checkbox ein-und ausblendbar machen. Das ganze soll dann in einem Cookie gespeichert werden, damit beim nächsten Besuch die gleichen Inhalte angezeigt werden.

    Ich habe auf meinem Webserver eine Datei "scripts.js" angelegt, in der sich folgender Code befindet:

    Code:
    jQuery(function($) {
    $('#cbshow').click(function(){   $('#divshow').toggle(this.checked);}); });
    Auf meiner Startseite wird darüber der DIV Container ein- und ausgeblendet. Dies funktioniert über folgenden Code, welcher sich auf der Seite selber befindet (über den Editor eingefügt):

    Code:
    <div id="divshow" style="display: none;">Dieser Text soll angezeigt werden</div>
    Ich würde jetzt gerne hinbekommen, dass man beim nächsten Besuch genau das angezeigt bekommt, was man auch am Ende des letzten Besuches gesehen hat. Also wenn die Checkbox angewählt war, soll auch beim Nächsten Besuch der Inhalt angezeigt werden. Ich habe auch schon einige Fiddle ausprobiert, aber ich glaube ich mache immer wieder Fehler beim Einbinden des jeweiligen Codes. Ein Beisipel-Fiddle wäre das hier: http://jsfiddle.net/R73vy/. Könntet ihr mir erklären, wie ich das in meine "scripts.js" übertrage, damit es funktioniert?

    Eine weitere Frage wäre, ob das überhaupt mit der Toggle-Funktion klappt, die ich oben verwendet habe.

    Vielen Dank für eure Hilfe!!

  • #2
    Ich empfehle, statt Cookies lieber localstorage zu verwenden, das ist wesentlich einfacher zu handhaben

    Kommentar


    • #3
      Hallo,

      habe hier ein Fiddle gefunden, bei dem das so gelöst wurde.

      Meine aktuelle scripts.js Datei sieht so aus:

      Code:
      jQuery(function($) {
      
      $('.divider-colors').click(function() {
      $('.textwidget').fadeToggle();
      });
          });
      
      jQuery(function($) {
      
      $('#cbshow').click(function(){
         $('#divshow').toggle(this.checked);
      });
       });
      
      function save(){
          var checkbox = document.getElementById('checkbox1zaal1');
          localStorage.setItem('checkbox1zaal1', checkbox.checked);
      }
      
      function load(){    
          var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
          document.getElementById("checkbox1zaal1").checked = checked;
      }
      
      function wis(){
          location.reload();
          localStorage.clear()
      
      }
      
      load();
      Allerdings funktioniert der Code so noch nicht. Habt ihr eine Idee woran dies liegen könnte?

      Beste Grüße
      mateox

      Kommentar


      • #4
        Warum es nicht funktioniert:
        • Du hast die ID der Checkbox nicht angepasst.
        • Du musst nicht nur den Status der Checkbox beim Laden aktualisieren, sondern auch den des divs.
        So funktioniert es:
        ​​​​​​​
        Code:
            <style>
                #divshow {
                    display: none;
                }
            </style>
            <div id="divshow">content</div>
            <input type="checkbox"id="cbshow" />
            <script>
                $('#cbshow').click(function () {
                    $('#divshow').toggle(this.checked);
                    save();
                });
        
                function save() {
                    var checkbox = document.getElementById('cbshow');
                    localStorage.setItem('cbstatus', checkbox.checked);
                }
        
                function load() {
                    var checked = localStorage.getItem('cbstatus') == 'true';
                    document.getElementById("cbshow").checked = checked;
                    $('#divshow').toggle(checked);
                }
        
                load();
            </script>

        Kommentar


        • #5
          Code:
          document.addEventListener('DOMContentLoaded', () => {
              var checkbox = document.querySelector("#checkbox");
              if(document.cookie) {
                  var dta = document.cookie;
                  if(dta == "checked") {
                      checkbox.checked = true;
                  }
              }
              checkbox.addEventListener('click', function() {
                  if(checkbox.checked = true) {
                      document.cookie = "checked";
                      showcontent();
                  } else {
                      document.cookie = "";
                      hidecontent();
                  }
              });
          });
          Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
          Albert Einstein

          Kommentar

          Lädt...
          X