DOM, document.getElementsByClassName, get index?

[VolkmarNaumburger]

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?

[JürgenB]

Hallo,

du könntest querySelectorAll und den Nachbarkombinator verwenden.

Gruß
Jürgen

[Rolf B]

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

[MudGuard]

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