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.
<!-- hier der code für das popupfenster, welches ein verlinktes bild ausspielen soll-->
<div class="overlay" id="popup">
<h2 id="TuerchenZahl"></h2>
<p class="popupTxt"></p>
<a id="link" href=""><img class="gift"></img></a>
<a href="#"><div class="close"></div></a>
</div>
<!-- hier der aufbau der tuerchen, fuers beispiel jetzt nur zwei tuerchen-->
<div class="tuerchen">
<div class="Fenster" id="1" data-link="https://wwww.beispiellink1.com" data-text="Türchen 1: Überraschung"><a href="javascript:zeigeDatei(1);"><img src="img/01.png" class="TuerchenImg" data-day="1" data-img="img/1_open.png" width=130 height=130 style="float:left;margin:3px;" alt="Türchen 1"/></a></div>
<div class="Fenster" id="2" data-link="https://wwww.beispiellink2.com" data-text="Türchen 2: Überraschung"><a href="javascript:zeigeDatei(2);"><img src="img/02.png" class="TuerchenImg" data-day="2" data-img="img/2_open.png"width=130 height=130 style="float:left;margin:3px;"/></a></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
// hide popup + aktionen
$(".overlay").hide();
$(".popupTxt").hide();
});
// datumsfunktionen
var Kalnow = new Date();
var Kalyear = Kalnow.getFullYear();
// aktuelles Datum
function Datum() {
var TageLang = new Array ("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
var MonateLang = new Array ("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var date = ((Kalnow.getDate()<10) ? "0" : "")+ Kalnow.getDate();
heute = TageLang[Kalnow.getDay()]+ " " + date + ". " + MonateLang[Kalnow.getMonth()] + " " + Kalyear ;
document.write("" +heute);
document.write("  - ");
}
// ende datumsfunktion
// bilder anzeigen
function zeigeDatei(KlickZahl)
{
// pfad der bilddateien
pfad = "tagesdateien/";
pfad2 = "img/";
var KlickDatum = new Date();
KlickMonat = KlickDatum.getMonth();
KlickTag = KlickDatum.getDate();
// Durchlauf Untersuchungen: Monat, Tag, angeklickte KlickZahl
if(KlickMonat < 11)
{
// oeffne popup – wenn noch nicht Dezember
$(document).ready(function () {
$(".overlay").fadeIn('slow');
$(".popupTxt").fadeIn('slow');
$(".popupTxt").html('Ist denn schon Dezember?<br>Versuch es ab 1. Dezember wieder.');
$(".close").click(function () {
$(".overlay").fadeOut("slow");
});
});
return;
}
// oeffne popup, wenn Dezember, aber falsches Tuerchen
if(KlickZahl > KlickTag && KlickMonat == 11)
{
$(document).ready(function () {
$(".overlay").fadeIn('slow');
$(".popupTxt").fadeIn('slow');
$(".popupTxt").text('Schummeln gilt nicht! Bald kannst du ein weiteres Türchen öffnen.');
$(".gift").hide();
$(".close").click(function () {
$(".overlay").fadeOut("slow");
});
});
return;
}
// oeffne popup – Dezember und richtiges Tuerchen
if(KlickZahl <= KlickTag && KlickMonat == 11)
{
$(document).ready(function () {
$(".overlay").fadeIn('slow');
$(".gift").show();
$(".popupTxt").hide();
$(".gift").attr('src', pfad + KlickZahl + ".jpg");
// verlinkungen
$('.gift').click(function() {
$('div[data-link]').each(function () {
var myLink = document.getElementById('link');
var THIS = $(this),
link = $('<a>', {'href': THIS.attr('data-link')
});
link.append(myLink);
});
});
// END verlinkungen
// close popup
$(".close").click(function () {
$(".overlay").fadeOut("slow");
});
});
}
else
{
// oeffne popup – Monat noch nicht Dezember
$(document).ready(function () {
$(".overlay").fadeIn('slow');
$(".popupTxt").text('Bald ist es soweit! Ab 1. Dezember kannst du hier das erste Türchen öffnen.');
$(".close").click(function () {
$(".overlay").fadeOut("slow");
});
});
return;
}
}Auszug Code für Verlinkungen – was mach ich hier falsch?
$('.gift').click(function() {
$('div[data-link]').each(function () {
var myLink = document.getElementById('link');
var THIS = $(this),
link = $('<a>', {'href': THIS.attr('data-link')
});
link.append(myLink);
});
});Ich hätte es auch noch so versucht:
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
