Aus- bzw Einklappen der Box in den Cookies speichern

[basti1012]

so sollte es jetzt gehen

array in localstorage startbox auf zu

...

codepen.io

 

[Dragosius]

Super Danke, jetzt habe ich nur noch eine Frage:

In einer Box verwende ich im Titel noch einen Link:

<h2 class="boxTitle anaus"><a href="#"><span class="text"></span></a> Tauschpartner <a href="index.php?info=tauschpartner">[?]</a></h2>

Nur der 2. Link wird nun ebenfalls zum auf- und zuklappen erkannt.
Wie kann ich das denn vermeiden?

Vielen Dank

 

[Dragosius]

Ok, ich habe es selbst gelöst.
Ich habe einfach statt "a" "span" genommen".

 

[Jan-Frederik Stieler]

Offtopic:

Ich habe es zumindest so gelernt, dass alle script-Teile in den Header-Teil kommen.

Da HTML prozedural abgearbeitet wird ist es eigentlich ungünstig JS-Code im header zu haben weil da das DOM noch nicht fertig ist. Deshalb muss man immer auch ein Event, wie window.onload oder document.addEventListener("DOMContentLoaded", …) abfragen. Sonst wird der Code ausgeführt obwohl entsprechendes DOM noch nicht verfügbar ist.
Wenn man JS ans Ende schreibt dann ist normalerweise das DOM auch schon verfügbar wenn das JS ausgeführt wird.

JS-Code gehört aber allein schon der Ordnung wegen in eine eigene Datei.
Und nur wenns nicht anders geht oder man faul ist ins HTML.

Ich persönlich finde noch das es ganz schön merkwürdig ist in Code deutsche variablen zu lesen. Ist mir erst gestern wieder aufgefallen als ich einen älteren PHP-Code von jemandem in den Händen hatte. keine Ahnung wie es dazu kam. Ich finde da sieht man immer am schnellsten ob mans mit Anfängern zu tun hat oder nicht.

Bzgl. Fontawesome Icons. Fa kann schon richtig sein. je nachdem ob @Dragosius Fontawesome 4 oder 5/6 verwednet.


Ontopic:
Benutze am besten IDs um Elemente zu Selektieren oder Klassen aber versuche darauf zu verzichten HTML-Elemente direkt anzusprechen. DAs is tnicht nur mit am langsamsten sondern kann auch nach hinten losgehen. Am schnellsten vom DOM her ist es IDs zu verwenden.
ich hab mir inzwischen angewöhnt IDs nur noch für JS zu verwenden und Klassen nur für CSS.

Grüße

 

[basti1012]

Ich persönlich finde noch das es ganz schön merkwürdig ist in Code deutsche variablen zu lesen

Das ist soweit richtig.
Ich finde aber, wenn ich einen JS Neuling einen Code zeige, das gerade solche variabel Namen" neuer_wert" für den Anfänger leichter zu verstehen als "new_items", "new_data" oder sonst was.
Ich glaube das gerade am Anfang solche variabel Namen helfen können den Code zu verstehen ( bzw. zu verfolgen).

Meine Meinung

 

[EuroCent]

ich hab mir inzwischen angewöhnt IDs nur noch für JS zu verwenden und Klassen nur für CSS

Dss man nur IDs verwenden sollte halte Ich nicht für ganz richtig, denn nicht immer sind IDs eine gute Wahl.
Nicht immer kann man IDs als Selektor verwenden, vorallem dann nicht wenn man beispielsweise datatable hat und den Inhalt aktualisieren muss

Ich verwende ausschließlich zwar auch nur IDs aber wenn ein Element das Attribut „name“ hat, dann verwende Ich sogar das:

$('table[name="name"])

Aber auch das nur wenn es angebracht ist und auch funktioniert

 

[Jan-Frederik Stieler]

Hi,
@EuroCent hab nicht davon gesprochen das man nur IDs verwenden sollte sondern einmal das es besser ist wegen der Performance welche einfach mit dem DOM-Konstrukt zu tun hat und dann das ich es mir angewöhnt habe. Das ist n kleiner aber feiner Unterschied.

@basti1012 wir geben alle nur unsere Meinung und Auslegungen ab. Fakten sind ja nicht diskutabel. Da gibts nur richtig und falsch.

Viele Grüße

 

[Dragosius]

Hallo zusammen,

jetzt muss ich hier leider nochmal was fragen.

Ich habe folgenden Code im Einsatz:

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        h=0;
        g=0;
        var neuer_wert;
        if(localStorage.getItem('boxen')){
            start=JSON.parse(localStorage.getItem('boxen'));
        }else{
            start=Array('true','true','true','true','true','true','true');
        }
        const elestart=document.querySelectorAll('.boxRight .boxContentRight');
        fa=document.querySelectorAll('.anaus .textRight');
        elestart.forEach(function(f,index){
            if(start[g]=='true'){
                icon='minus';
            } else {
                f.classList.add('aus');
                        icon='plus';
            }
            fa[index].innerHTML='<div class="icon icon24 fa fa-'+icon+'-square nachrichten-iconfarbe"></div>';
            g++;
        });
    
        ele=document.querySelectorAll('.boxRight');
        ele.forEach(function(f,index){
            but=f.querySelectorAll('.anaus');
            but[0].addEventListener('click',function(){
                fa=f.querySelectorAll('.textRight');
                g=f.querySelectorAll('.boxContentRight');
                if(g[0].classList.contains("aus")){
                    g[0].classList.remove('aus');
                    neuer_wert='true';
                    icon='minus';
                }else{
                    g[0].classList.add('aus');
                    neuer_wert='false';
                    icon='plus';
                }
                fa[0].innerHTML='<div class="icon icon24 fa fa-'+icon+'-square nachrichten-iconfarbe"></div>';
                start.splice(index, 1, neuer_wert)
                localStorage.setItem('boxen',JSON.stringify(start));
            });
            h++;
        })
    });
</script>

.aus{
    display:none;
}

Exemplarisch zwei der 7 Boxen:

<!-- rechte Box - Dailies - Anfang -->
<section class="box boxRight">
    <h2 class="boxTitle anaus"><span class="textRight"></span> Dailies <a href="index.php?info=dailies">[?]</a></h2>
    <div class="boxContent boxContentRight">
        <div class="sidebarItemTitle">
            [Inhalt]
        </div>
    </div>
</section>
<!-- rechte Box - Dailies - Ende -->

<!-- rechte Box - Shoutbox - Anfang -->
<section class="box boxRight">
    <h2 class="boxTitle anaus"><span class="textRight"></span> Shoutbox <span class="icon icon16 fa-refresh refresh-shoutbox"></span></h2>
    <div class="boxContent boxContentRight">
        <div class="sidebarItemTitle">
            [Inhalt]
        </div>
    </div>
</section>
<!-- rechte Box - Shoutbox - Ende -->

Das Problem ist nun, dass es nur im Firefox funktioniert.
Weder im Edge noch im Chrome werden die Boxen zu- bzw aufgeklappt.

 

[EuroCent]

Was sagt denn die Konsole bei den Browsern wo es nicht geht?

 

[Dragosius]

Im Edge wird gar nichts angezeigt.
Das Icon verändert sich, aber die Boxen gehen nicht auf und zu.

Im Chrome funktioniert es, ich habe es gerade selbst getestet.

Nachtrag:
Es funktioniert doch in jedem Browser, es war ein Cache-Problem.

 

[EuroCent]

Na dann ist ja alles Super

 

[Jan-Frederik Stieler]

Was immer ganz gut ist, ist ein JSBin, Fiddle oder was auch anzulegen. Dann kann man den Code aus gleich ausgeführt sehen.

grüße