Adventkalender random

Diskutiere Adventkalender random im JavaScript Forum im Bereich Programmierung; Hi, ich habe einen interaktiven Adventkalender erstellt. Die 24 Türchen habe ich als Aufzählingsliste platziert (1-24 der Reihe nach). Hinter...
Neues Thema erstellen Antworten
  • Adventkalender random Beitrag #1
C
catlady
New member
Beiträge
3
Punkte Reaktionen
0
Hi,

ich habe einen interaktiven Adventkalender erstellt.

Die 24 Türchen habe ich als Aufzählingsliste platziert (1-24 der Reihe nach).
Hinter jedem aktiven Türchen liegt ein Bild, welches zu einer x-beliebigen URL verlinkt.

Das funktioniert in der normalen Reihenfolge (1-24) super, aber jetzt möchte ich das ganze random machen und da weiß ich nicht weiter.

HTML: 
<div class="content">
<!-- random doors 1-24-->
      <ul>
        <li><div class="door" id="door18"><img class="imgDoor" src="img/door18.png" alt="18. Türchen" width="120"/></div></li>
        <li><div class="door" id="door14"><img class="imgDoor" src="img/door14.png" alt="14. Türchen" width="120"/></div></li>
        <li><div class="door" id="door9"><img class="imgDoor" src="img/door09.png" alt="9. Türchen" width="120"/></div></li>
        <li><div class="door" id="door1"><img class="imgDoor" src="img/door01.png" alt="1. Türchen" width="120"/></div></li>
        <li><div class="door" id="door3"><img class="imgDoor" src="img/door03.png" alt="3. Türchen" width="120"/></div></li>
        <li><div class="door" id="door16"><img class="imgDoor" src="img/door16.png" alt="16. Türchen" width="120"/></div></li>
      </ul>
</div>

Hier das Skript. Muss ich da was in der Schleife ändern?

Javascript: 
<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>

Danke
 
  • Adventkalender random Beitrag #2
A
AndreasB
Well-known member
Beiträge
75
Punkte Reaktionen
4
Was passiert denn? Oder was passiert eben nicht?

Dein HTML ist nicht vollständig oder?
das müssten ja 24 li Elemente sein.

Außerdem würde ich dir vorschlagen, deinen Code noch ein wenig in Funktionen zu unterteilen.
 
  • Adventkalender random Beitrag #3
C
catlady
New member
Beiträge
3
Punkte Reaktionen
0
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:

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>
 
      <!--Reihenfolge random-->
      <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>
 
  • Adventkalender random Beitrag #4
A
AndreasB
Well-known member
Beiträge
75
Punkte Reaktionen
4
Hi. Dein Problem liegt in diesem Ausdruck:
Javascript: 
// vergangene tuerchen oeffnen
if( day !== adventwindow && adventwindow < day )
(davon abgesehen, dass der Ausdruck redundant ist.)

Hier überprüfst du adventwindow. Dieser Wert basiert aber auf dem Index, nicht auf der Türchennummer:
Javascript: 
var adventwindow = index + 1;

Versuch das mal so:
Javascript: 
var adventwindow = numbers[index];
Dann basiert der Wert auf deinem numbers Array


PS:
Ich würde dir allerdings raten, das numbers Array, weg zu tun und den Wert direkt aus dem DOM auszulesen.
Dadurch eliminierst du eine große Fehlerquelle.
 
  • Adventkalender random Beitrag #5
C
catlady
New member
Beiträge
3
Punkte Reaktionen
0
Hi,

oh manno... vielen dank. da hätt ich wohl auch selber drauf kommen können.

danke für den tipp mit dem array entfernen. guter hinweis!
 
Thema:

Adventkalender random

Oben Unten