Hallo,
Ich habe ein Formular und wenn ein bestimmtes input-Feld aktiviert ist über onfocus, dann sollen in der zweiten Spalte der Website alle dazugehörigen Produktbilder zu diesem input-feld geladen werden.
Ich würde alle Bilder ins HTML einbetten und sie standardmäßig verstecken. Die Container-Elemente mit den Bildern bekommen IDs:
<ul id="bilder1" class="hidden">
<li><img src="…" alt="…"></li>
</ul>
<ul id="bilder2" class="hidden">
<li><img src="…" alt="…"></li>
</ul>
Die Input-Elemente wird mit den Bildern über diese ID verknüpft. Die zugehörige ID lässt sich in einem data-Attribut unterbringen:
<input type="text" class="feld-mit-bildern" data-images-id="bilder1">
<input type="text" class="feld-mit-bildern" data-images-id="bilder2">
~~~usw.
Das ganze Event-Handling (beim Fokus tue dieses und jenes) sollte im JavaScript aufgesetzt werden. Das JavaScript am besten am Ende des Dokuments laden, damit das DOM und all seine Elemente verfügbar sind.
~~~javascript
// Kapselung in selbstausführender Funktion
(function() {
// Speichert das Element mit den aktuell sichtbaren Bildern
var activeImages;
// Event-Handling aufsetzen
var initInputImages = function() {
// Alle Elemente mit der Klasse »feld-mit-bildern« holen
var inputs = document.getElementsByClassName('feld-mit-bildern');
for (var i = 0, el; el = inputs[i]; i++) {
// Event-Handler registrieren
el.onfocus = showImages;
}
};
// Der Event-Handler
var showImages = function(event) {
// Lese data-Attribut aus, um an die zugehörige ID zu kommen
var imageClass = event.target.getAttribute('data-images-id');
// Verstecke die aktuell sichtbaren Bilder
if (activeImages) {
activeImages.className = 'hidden';
}
// Zeige die Bilder, die sichtbar werden sollen
// Hole das zugehörige Element
activeImages = document.getElementById(imageClass);
// Lösche die hidden-Klasse
activeImages.className = '';
};
// Start!
initInputImages();
})();
Zum Verstecken wird die Klasse »hidden« verwendet. Die muss im CSS natürlich formatiert werden:
/* Einfache Variante */
.hidden { display: none; }
/* Bessere Variante (zugänglich) */
.hidden {
position: absolute;
left: -9999px;
width: 0;
height: 0;
overflow: hidden;
}
Das Ganze mag auf Anhieb etwas komplex wirken, und es ist auch komplizierter, als man es lösen könnte. Aber das ist eine bessere Herangehensweise als JavaScript-Code direkt im HTML und CSS-Code direkt im JavaScript unterzubringen.
Man könnte zusätzlich einen Link neben dem Eingabefeld zu den jeweiligen Bildern unterbringen, und die Bilder nur Verstecken, wenn JavaScript verfügbar ist. Dann wäre das Formular auch ohne JavaScript voll bedienbar und ließe sich auch benutzen, wenn z.B. der Bildschirm zu klein ist, um Formular und Bilder nebeneinander darzustellen.
Viele Grüße,
Mathias