VolkmarNaumburger: DOM, document.getElementsByClassName, get index?

Ich habe zwei Gruppen von <div>:

  1. mehrere Images durch individuelle id's (z.B. id="im01", id="im02", ...) gekennzeichnet, und
  2. zu jedem image assoziiert ein Button. Alle Buttons sind mit der selben class (z.B. class="but") gekennzeichnet. Mit den Buttons soll die Sichtbarkeit des jeweiligen images getoggelt werden (das klappt alles).

Zum Beispiel:

image:

Button (off): bzw. (on)

Nun das Problem: unter den Buttons befindet sich ein Textfeld, das die Angaben "on" bzw. "off" je nach Zustand des betreffenden Buttons anzeigt. Dieses Textelement ist als <p class="butText">status</p> gekennzeichnet und soll nun per javascript DOM-Manilulation document.getElementsByClassName("butText")[index].InnerHTML = "on" (oder "off") geändert werden. Woher kann ich den notwendigen index beziehen? oder gibt es eine andere Methode?

  1. Hallo,

    du könntest querySelectorAll und den Nachbarkombinator verwenden.

    Gruß
    Jürgen

  2. Hallo Volkmar,

    eine Prise JavaScript brauchst Du, wenn Du einen großflächigen Togglebutton ohne Checkbox-Hack verwenden willst, aber der Rest geht mit CSS.

    Bei diesem HTML

    <div class="toggleImage" aria-checked="false"> <button></button> <figure> <img src="...url..." height="300" alt="Alt-Beschreibung"> <figcaption>...</figcaption> </figure> </div>

    und diesem JavaScriptchen, das nichts weiter tut als am .toggleImage div den aria-checked State umzuschalten:

    document.addEventListener("click", function(e) { let btn = e.target; if (btn.tagName != "BUTTON") return; let tgl = btn.closest(".toggleImage"); if (!tgl) return; let ch = (tgl.getAttribute('aria-checked') == "false") ? "true" : "false"; tgl.setAttribute('aria-checked', ch); })

    geht der Rest mit CSS. Zum Beispiel so:

    .toggleImage { display: flex; } .toggleImage button { flex: 0 0 3em; position: relative; height: 3em; } .toggleImage figure { flex: 1 0 auto; display:none; } .toggleImage[aria-checked=true] figure { display:block; } .toggleImage[aria-checked=true] button::before { content: "\2713"; position: absolute; top: -0.5em; left: 0; font-size: 4em; } .toggleImage[aria-checked] button::after { content: "OFF"; position: absolute; top: 3em; left: 0em; width: 3em; text-align:center; } .toggleImage[aria-checked=true] button::after { content: "ON"; }

    Die Darstellungsvarianten hängen am Wert des aria-checked Attributes, der ON/OFF Text wird mit ::after unter den Button gesetzt, und das Check-Häkchen mit ::before hinein. Weil das Häkchen über den Button hinausragen soll, habe ich es absolut positioniert.

    Um Button und Bild nebeneinander zu bekommen, verwende ich flexbox.

    Beispiel in JSFiddle

    Rolf

    -- sumpsi - posui - clusi
  3. Hi,

    Nun das Problem: unter den Buttons befindet sich ein Textfeld, das die Angaben "on" bzw. "off" je nach Zustand des betreffenden Buttons anzeigt. Dieses Textelement ist als <p class="butText">status</p> gekennzeichnet

    Hm. Ich hätte dafür figure genutzt, darin der Button, und das "on" bzw. "off" als fig-caption.

    Und dann den Nachbar-Selektor verwenden wie bereits erwähnt …

    cu,
    Andreas a/k/a MudGuard