Ankündigung

Einklappen
Keine Ankündigung bisher.

Inhalt per Checkbox ein/ausblenden und per Cookie speichern

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

          homepage-forum.de - Hilfe für Webmaster! Statistiken

          Einklappen

          Themen: 56.399   Beiträge: 428.170   Mitglieder: 27.768   Aktive Mitglieder: 91
          Willkommen an unser neuestes Mitglied, auralivecasino.

          Online-Benutzer

          Einklappen

          229 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 228.

          Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

          Die neuesten Themen

          Einklappen

          Kostenlose Homepage bei Jimdo!

          Einklappen

          Jimdo

          Die neuesten Beiträge

          Einklappen

          Lädt...
          X