Random Funktion, Fehlersuche

Homer.J.S. · 12 Mai 2014

Hallo zusammen,

ich habe mithilfe von Javascript und der Random Funktion einen Zufallsgenerator programmiert. Das ganze habe ich über ein Array und Klassen gemacht, weil ich das Random mehrmals (nebeneinander) verwenden möchte (=deswegen keine IDs). Mittlerweile weiß ich mir keinen Rat mehr, da ich den oder die Fehler nicht finde und derzeit gar nichts mehr funktioniert. Falls jemand nen Lösungsansatz hätte, wäre es super.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
.wrapper {
display: inline-block;
position: relative;
}
.wrapper .text {
display: none;
}
.wrapper:hover .text {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="wrapper">
<a href="" class="link">
<img src="" class="image">
</a>
<div class="text"></div>
</div>
<script type="text/javascript">
(function(){
var data = [
{
image: "dokumente/bilder/bild.jpg",
width: 250,
height: 250,
href: "url",
text: "Darzustellender Text."
},
{
image: "dokumente/bilder/bild.jpg",
width: 250,
height: 250,
href: "url",
text: "Darzustellender Text."
},
{
image: "dokumente/bilder/bild.jpg",
width: 250,
height: 250,
href: "url",
text: "Darzustellender Text."
},
{
image: "dokumente/bilder/bild.jpg",
width: 250,
height: 250,
href: "url",
text: "Darzustellender Text."
},
{
image: "dokumente/bilder/bild.jpg",
width: 250,
height: 250,
href: "url",
text: "Darzustellender Text."
}
];

Array.prototpye.forEach.call(document.getElementsByClassName("wrapper"), function(wrapper){
var currentDataset = data[Math.floor(Math.random() * data.length)];

wrapper.getElementsByClassName("link")[0].href = currentDataset.href;
var img = wrapper.getElementsByClassName("image")[0];
img.src = currentDataset.image;
img.width = currentDataset.width;
img.height = currentDataset.height;
wrapper.getElementsByClassName("text")[0].innerHTML = currentDataset.text;
});

}());
</script>
</body>
</html>

Tronjer · 12 Mai 2014

Im ersten Schritt erstellst du ein Array mit Daten und führst darauf ein Shuffle aus. Im zweiten iterierst du über das Array mit foreach, erzeugst innerhalb der Schleife die HTML-Elemente mit den Daten des Arrays und fügst das ins DOM ein.

Mit jQuery ist das eigentlich ganz einfach.

HTML:

<div id="wrapper"></div>

$(function() {
  var data = [
    { img: "apfel.jpg", txt: "Ein Apfel", wid: 250, heig: 250 },
    { img: "birne.jpg", txt: "Eine Birne", wid: 250, heig: 250 },
    { img: "zitrone.jpg", txt: "Eine Zitrone", wid: 250, heig: 250 }
  ];

  data.sort(function() {return 0.5 - Math.random()});

  $.each(data, function(index, value) {
    $("#wrapper").append(function() {
      return '<img id="bild_' + index + '" src="' + value.img + '" width="' + value.wid + '" height="' + value.heig + '"><br>' +
             '<span>' + value.txt + '</span><br>';
    });
  });
});

Du kannst zusätzlich auf den Index der Array Objekte zugreifen. Ich habe damit aufsteigende IDs für die Bilder erzeugt.

Random Funktion, Fehlersuche

Homer.J.S.

Neues Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge