Hallo Community :-)
Ich möchte auf meiner Website in der Lage sein, DIVS per Checkbox ein und auszublenden. Das ganze soll dann noch per Localstorage gespeichert werden, sodass für den nächsten Besuch die Auswahl gespeichert ist.
Ich habe bereits einen Code aus einem nicht-wordpress Forum erhalten. Der Lösungsvorschlag sieht folgendermaßen aus:
PHP
var i, checkboxes = document.querySelectorAll('input[type=checkbox]');
function save() {
for (i = 0; i < checkboxes.length; i++) {
// mit json kodiert, damit der typ nicht von boolean zu string geändert wird
localStorage.setItem(checkboxes[i].value, JSON.stringify( checkboxes[i].checked ));
}
}
function load_() {
for (i = 0; i < checkboxes.length; i++) {
// Wert wieder auslesen und zurück dekodieren
var isChecked = JSON.parse( localStorage.getItem(checkboxes[i].value) );
checkboxes[i].checked = isChecked;
// sichtbarkeit abhängig vom checked-Status setzen
var showState = isChecked ? 'block' : 'none';
document.getElementById(checkboxes[i].value).style.display = showState;
}
}
Alles anzeigen
Das ist das Skript. Auf der eigentlichen Seite könnte dann dieser Code stehen:
PHP
<input type="checkbox" value="chB1" /> Checkbox 1
<input type="checkbox" value="chB2" /> Checkbox 2
<input type="checkbox" value="chB3" /> Checkbox 3
<input type="checkbox" value="chB4" /> Checkbox 4
<input type="checkbox" value="chB5" /> Checkbox 5
<button>SAVE</button>
<button>LOAD</button>
<div id="chB1">1. Ich bin sichtbar!</div>
<div id="chB2">2. Ich bin sichtbar!</div>
<div id="chB3">3. Ich bin sichtbar!</div>
<div id="chB4">4. Ich bin sichtbar!</div>
<div id="chB5">5. Ich bin sichtbar!</div>
Alles anzeigen
Jetzt habe ich konkret zwei Fragen
1) Kann einer von euch den Code mal testen?
2) Wie genau kann ich den Code in Wordpress implementieren? Was muss ich dabei alles beachten?
Beste Grüße
Mateox