Adventkalender Problem mit Links in data-Attribut

  • Liebe Forum-Community,


    ich habe mal wieder ein Problem mit Javascript (wir werden keine Freunde :P).


    Ich hab eben 24 Kästchen hinterlegt mit einer Zeitfunktion. Ab 1. Dezember ist das jeweilige Türchen aktiv bzw. es öffnet sich per Klick ein Fenster mit dem jeweiligen Kästcheninhalt, einem Bild.

    Die Kästchen selbst haben also schon einen a-Tag, um die JS-Funktion aufzurufen (zeigeDatei();). Pro Tag ist ein anderes Bild hinterlegt, welches auf eine Seite in einem neuen Fenster verlinken soll. Den Link gebe ich mithilfe des data-Attributes im jeweiligen Kästchen-Divs an.


    Folgende Probleme:
    1) Ich würde prinzipiell jetzt gerne wissen, ob das überhaupt möglich ist, den jeweiligen Link so auszulesen bzw. auszugeben oder ob es dafür eine bessere Variante gibt?

    Und wenn es möglich ist wie ich das hinbekomme. In der if-Abfrage (if(KlickZahl <= KlickTag && KlickMonat == 11)) habe ich bereits versucht das mit der Verlinkung hinzubekommen, aber weiß nicht ob das in die richtige Richtung geht.


    2) Weiters würde ich gern bei jedem aktiven Kästchen per Klick ein anderes Bild laden (statt der Türchennummer "01.png" ein Hintergrundbild "01_open.png"). Die Quelle des Hintergrundbildes gebe ich über data-img an. Da habe ich es auch noch nicht hinbekommen, immer nur das geklickte Kästchen anzusprechen.



    Auszug Code für Verlinkungen – was mach ich hier falsch?

    Ich hätte es auch noch so versucht:

    JavaScript
    var myLink = document.getElementById('link');
    
    // funktion nur aktuelle und vergangene aktionen
    var fensterTxt = document.querySelectorAll(".Fenster");
    for (var i = 0; i < fensterTxt.length; i++) {
    var fenster = fensterTxt[i];
    var ergebnis = fenster.getAttribute('data-link');
    }



    Ich hoffe ich hab mich verständlich ausgedrückt und versteht was ich meine.

    Ich würde mich über eure Hilfe freuen.


    Vielen Dank!


    lG,

    mieze

  • Ich bin nicht bis ins letzte Detail in deinen Code eingestiegen, nur einige Hinweise, was schnell auffällt:

    • Das mit den data-Attributen hast Du schon sehr schön gemacht.
    • Tu dir einen Gefallen und style das Ganze nicht mit float. Für die Türchen eines Adventskalenders bietet sich ein Gridlayout an.
    • Ein a-href-Tag um Javascript auszuführen, ist ein wenig umständlich. Du kannst statt dessen einfach Eventlistener auf die Türchen registrieren:
    Code
    document.querySelectorAll('.Fenster').forEach((dasFenster) => {
        dasFenster.addEventListener((event) => {
            const derLink = dasFenster.dataset['link'],
                derText = dasFenster.dataset['text'];
            // so kannst Du die data-Attribute auslesen
            // und die Werte in das Overlay eintragen.
        });
    });
  • und noc h ein paar kleinigkeiten.

    Was soll den das

    Code
    document.write("&#160;&#160;-&nbsp;&nbsp;");

    Mach es besser mit innerHTML.

    Was ist das ?

    Code
    document.write("" +heute);

    Das

    Code
    var THIS = $(this),

    Variable mit THIS als Name sollte nur ptobleme machen


    Dann nutzt du mal "" und mal wieder nicht.

    Du solltest dich für eins entscheiden und das Konsequent durchziehen.

    Code
    id="2"

    Das ist angeblich erlaubt, ich würde es aber lieber vermeiden.


    Das ist veraltet und kann gelöscht werden

    Code
    type="text/javascript" language="JavaScript" 
    Code
    var myLink = document.getElementById('link');     
           var THIS = $(this),       
         link = $('<a>', {'href': THIS.attr('data-link')

    Vamilla und Jquery durcheinander mischen ist nicht schön , aber nicht verboten


    Du benutzt immer die gleichen Elemente und definierst sie immer wieder neu ,

    oder sprichst sie immer wieder neu an.

    Ich schätze mal das man den Code um Ca 50 Zeilen kürzen könnte

  • Variable mit THIS als Name sollte nur ptobleme machen

    Javascipt ist case sensitive, this und THIS sind damit zwei verschiedene Variablen - für wirklich sinnvoll halte ich THIS als Variablennamen aber trotzdem nicht.

    Code
    Code																					id="2"																				

    Das ist angeblich erlaubt, ich würde es aber lieber vermeiden.

    In HTML5 ist es erlaubt, in älteren HTML-Versionen nicht, stimmt - mir widerstreben Zahlen als ID aber auch irgendwie.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!