// Daten für Hauptbilder und deren Blätter
const datenGruppen = {
„gruppe1“: {
„bild1“: [
„https://mathe-pro.ch/wp-content/uploads/P4-MS-11_1.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-12_4.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-16_4.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-22_3.png“
],
„bild2“: [
„https://mathe-pro.ch/wp-content/uploads/P4-MS-11_2.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-14_1.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-21_1.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-22_4.png“
]
},
„gruppe2“: {
„bild1“: [
„https://mathe-pro.ch/wp-content/uploads/P4-MS-12_1.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-14_4.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-21_4.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-23_2.png“
],
„bild2“: [
„https://mathe-pro.ch/wp-content/uploads/P4-MS-12_2.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-16_1.png“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-21_all.p“,
„https://mathe-pro.ch/wp-content/uploads/P4-MS-23_3.png“
]
}
};
// Initialisierung der Dropdown-Blöcke
function initDropdownBlocks() {
const blocks = document.querySelectorAll(„.dropdown-block“);
blocks.forEach((block, blockIndex) => {
const gruppe = block.getAttribute(„data-bild-gruppe“);
const menueButton = block.querySelector(„.menueButton“);
const menueContainer = block.querySelector(„.menueContainer“);
const hauptDropdown = block.querySelector(„.hauptDropdown“);
const blattDropdown = block.querySelector(„.blattDropdown“);
const bild = block.querySelector(„.wechselbild“);
console.log(`Initialisiere Block ${blockIndex + 1} für Gruppe: ${gruppe}`);
// Event: Menü öffnen/schließen
menueButton.addEventListener(„click“, () => {
if (menueContainer.style.display === „none“) {
menueContainer.style.display = „block“;
menueButton.textContent = „Menü schließen“;
} else {
menueContainer.style.display = „none“;
menueButton.textContent = „Menü öffnen“;
}
});
// Event: Haupt-Dropdown ändern
hauptDropdown.addEventListener(„change“, () => {
const ausgewähltesBild = hauptDropdown.value;
console.log(`Gruppe: ${gruppe}, Haupt-Dropdown geändert: ${ausgewähltesBild}`);
// Daten prüfen
if (!datenGruppen[gruppe] || !datenGruppen[gruppe][ausgewähltesBild]) {
console.error(`Fehler: Keine Daten für Gruppe „${gruppe}“ und Auswahl „${ausgewähltesBild}“ gefunden.`);
return;
}
const blätter = datenGruppen[gruppe][ausgewähltesBild];
// Blatt-Dropdown füllen
blattDropdown.innerHTML = „“; // Leeren
blätter.forEach((blatt, index) => {
const option = document.createElement(„option“);
option.value = blatt;
option.textContent = `Blatt ${index + 1}`;
blattDropdown.appendChild(option);
});
// Standardbild setzen
if (blätter.length > 0) {
bild.src = blätter[0] + „?t=“ + new Date().getTime();
console.log(`Bild geändert auf: ${blätter[0]}`);
}
});
// Event: Blatt-Dropdown ändern
blattDropdown.addEventListener(„change“, () => {
const ausgewähltesBlatt = blattDropdown.value;
console.log(`Blatt-Dropdown geändert: ${ausgewähltesBlatt}`);
if (ausgewähltesBlatt) {
bild.src = ausgewähltesBlatt + „?t=“ + new Date().getTime();
console.log(`Bild geändert auf: ${ausgewähltesBlatt}`);
}
});
// Initiales Laden der Optionen
hauptDropdown.dispatchEvent(new Event(„change“));
});
}
// Starte die Initialisierung, wenn das Dokument geladen ist
document.addEventListener(„DOMContentLoaded“, initDropdownBlocks);
×
![]()