JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="catlady, post: 11455, member: 2149"] Danke für deine Antwort. Es ging nur darum, dass ich das Umändern auf eine andere Anordnung der Kästchen nicht schaffe. Also grundsätzlich funktioniert er, wenn ich die Türchen 1-24 chronologisch richtig reihe. Aber ich möchte die Türchen wie du im HTML-Code siehst durcheinander mischen. Durch das Skript wird das Türchen des 18. Dezembers (div id door18) aber nun als 1. Türchen (1. Dezember) erkannt... wie schreibe ich das Skript um, dass an dem jeweiligen Tag das richtige Türchen aktiv wird. Hier der gesamte Code: [CODE=html]<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <title></title> <link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="wrapper"> <div id="header"> <img src="img/header.png" alt="header"> </div> <div class="content"> <h1 id="headline">Adventkalender</h1>  <ul> <li><div class="door" id="door18"><img class="imgDoor" src="img/18.png" alt="18. Türchen" width="120"/></div></li> <li><div class="door" id="door14"><img class="imgDoor" src="img/14.png" alt="14. Türchen" width="120"/></div></li> <li><div class="door" id="door9"><img class="imgDoor" src="img/09.png" alt="9. Türchen" width="120"/></div></li> <li><div class="door" id="door1"><img class="imgDoor" src="img/01.png" alt="1. Türchen" width="120"/></div></li> <li><div class="door" id="door3"><img class="imgDoor" src="img/03.png" alt="3. Türchen" width="120"/></div></li> <li><div class="door" id="door16"><img class="imgDoor" src="img/16.png" alt="16. Türchen" width="120"/></div></li> <li><div class="door" id="door5"><img class="imgDoor" src="img/05.png" alt="5. Türchen" width="120"/></div></li> <li><div class="door" id="door15"><img class="imgDoor" src="img/15.png" alt="15. Türchen" width="120"/></div></li> <li><div class="door" id="door8"><img class="imgDoor" src="img/08.png" alt="8. Türchen" width="120"/></div></li> <li><div class="door" id="door10"><img class="imgDoor" src="img/10.png" alt="10. Türchen" width="120"/></div></li> <li><div class="door" id="door20"><img class="imgDoor" src="img/20.png" alt="20. Türchen" width="120"/></div></li> <li><div class="door" id="door11"><img class="imgDoor" src="img/11.png" alt="11. Türchen" width="120"/></div></li> <li><div class="door" id="door12"><img class="imgDoor" src="img/12.png" alt="12. Türchen" width="120"/></div></li> <li><div class="door" id="door23"><img class="imgDoor" src="img/23.png" alt="23. Türchen" width="120"/></div></li> <li><div class="door" id="door17"><img class="imgDoor" src="img/17.png" alt="17. Türchen" width="120"/></div></li> <li><div class="door" id="door4"><img class="imgDoor" src="img/04.png" alt="4. Türchen" width="120"/></div></li> <li><div class="door" id="door7"><img class="imgDoor" src="img/07.png" alt="7. Türchen" width="120"/></div></li> <li><div class="door" id="door19"><img class="imgDoor" src="img/19.png" alt="19. Türchen" width="120"/></div></li> <li><div class="door" id="door13"><img class="imgDoor" src="img/13.png" alt="13. Türchen" width="120"/></div></li> <li><div class="door" id="door21"><img class="imgDoor" src="img/21.png" alt="21. Türchen" width="120"/></div></li> <li><div class="door" id="door6"><img class="imgDoor" src="img/06.png" alt="6. Türchen" width="120"/></div></li> <li><div class="door" id="door22"><img class="imgDoor" src="img/22.png" alt="22. Türchen" width="120"/></div></li> <li><div class="door" id="door2"><img class="imgDoor" src="img/02.png" alt="02. Türchen" width="120"/></div></li> <li><div class="door" id="door24"><img class="imgDoor" src="img/24.png" alt="24. Türchen" width="120"/></div></li> </ul> </div> </div> <script> $( document ).ready(function() { // reihenfolge random var numbers = ["18", "14", "09", "01", "03", "16", "05", "15", "08", "10", "20", "11", "12", "23", "17", "04", "07", "19", "13", "21", "06", "22", "02", "24"]; var urls = ["https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com", "https://www.xzy.com" ]; var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var scrolled = false; var timeDelay = 500; if(month === 12) { // schleife fuer alle tages tuerchen $("li").each( function( index ) { var adventwindow = index + 1; var item = $(this); // vergangene tuerchen oeffnen if( day !== adventwindow && adventwindow < day ) { window.setTimeout(function(){ item.children(".door").addClass("open"); item.children(".back").css({opacity: 0, visibility: "visible"}).animate({opacity: 0.6}, 500); }, timeDelay); } // END tueroeffnung // tuercheninhalt / background hinzufuegen if( adventwindow <= day ) { var number = numbers[index]; var url = urls[index]; $(this).append('<div class="back"><a href="' + url + '" target="_blank" class="imgDoor"><img src="img/' + number + '_background.png"></a></div>'); } // END tuerinhalt // klick auf tuerchen, oeffnen/schließen $(this).on("click", function() { // alle vergangenen tage if(adventwindow <= day ) { $(this).children(".door").toggleClass("open"); item.children(".back").css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); } else { } // zukünftige tage if(adventwindow > day) { $(this).children(".door").removeClass("open"); } // vergangene tage if(adventwindow < day) { $(this).children(".door").toggleClass("open"); } }); // END onclick }); // END schleife } // END if monat dezember }); </script> </body> </html> [/CODE] [/QUOTE]

Authentifizierung