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...
C

catlady

New member
Dabei seit
23.03.2021
Beiträge
4
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.
Beim Skript scheitert es aber. Mit der Reihenfolge 1-24 klappt es wunderbar, aber ich weiß nicht wie ich das random Reihenfolge mache.
Kann mir jemand helfen?

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>

Skript:
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>
 
Thema:

Adventkalender random

Oben