Mit addEventListener kannst Du eine Aktion beim Klick durchführen.
Mit querySelektorAll kannst Du eine Nodelist, so eine Art Array, der drei Divs erzeugen.
Dann eine Variable führen, die den Index des Elementes in der Nodelist angibt.
diesen Index von Klick zu Klick um eins erhöhen und das alte Element unsichtbar und das neue sichtbar machen.
Zum Nachschlagen empfehle ich Selfhtml.
Mit "nicht animiert" meinst Du wahrscheinlich, dass die Elemente abrupt, ohne Überblenden, wechseln sollen? Und mit "Bei Klick auf ein div", dass der Wechsel nicht automatisch erfolgen soll, sondern eben durch Klick?
Ich hatte mir vorgestellt, die SVGs in den selben Container .icon zu legen und absolut zu positionieren, so dass sie übereinander liegen. Da es drei Bilder sind, musst Du jedes für 1/3 der Zeit, d. h. 33.33% anzeigen. Und wenn Du statt gezielter Klassen alle Pfade ändern willst, brauchst Du ebenfalls querySelectorAll und eine Schleife, denn es sind ja mehrere Pfade. Und musst den Punkt vor dem "path" weg lassen.
Ausgehend von deiner ersten Version habe ich dies gemacht:
https://codepen.io/Sempervivum/pen/RXoBmm
BTW: Wenn wir bei Opacity sind, kann man mit wenigen Änderungen am Timing einen netten Übergangseffekt erzielen:
PS: Außerdem liefert document.querySelector nur das erste Element. Da dein Selektor mehrere Elemente liefert, musst Du document.querySelectorAll benutzen und die Element in einer Schleife abarbeiten.
Offenbar kann man die Elemente eines SVGs als Hintergrundbild nicht mit CSS gestalten:
https://stackoverflow.com/questions/1336…ackground-image
Because as a background img, it isn't part of the DOM and you can't manipulate it.
Du kannst jedoch den selben Effekt erzielen, indem Du die Grafiken normal einbettest und z. B. die opacity animierst um zwischen den drei Grafiken umzuschalten.
var_dump ist nur für die Ausgabe von Variablen geeignet. Lass es weg, dann wird es funktionieren.
Was das bedeutet, kann man nur beurteilen, wenn man weiß, in welchem Zusammenhang bzw. an welcher Stelle in deinem Code das steht.
var_dump() kann auch ein zweidimensionales Array ausgeben.
Was in_array betrifft, so hängt die Auswertung davon ab, was Du haben willst. Du hattest ja den Wunsch, dass die $carray der Module für jede Kategorie getrennt gespeichert werden.
PS: Ich sehe gerade, dass da ein Fehler ist:
$carray[$categoryname] = $arrayst; muss lauten: $carray[$categoryname] = [$arrayst];
soll ja ein zweidimensionales Array werden.
Jetzt musst Du natürlich auch die Auswertung anpassen, in_array wird bei einem zweidimensionalen nicht funktionieren. Und überprüfen, ob das Array richtig aufgebaut wird, z. B. durch ein var_dump().
Inzwischen glaube ich, dass ich deine Aussage aus Posting #1 jetzt besser verstehe:
Es soll jedoch praktisch für jede Kategorie ein individueller Array erstellt werden. Wie ist das möglich? Danke schonmal!
Lösung: Ein zweidimensionales Array, wie früher schon angeregt:
require 'inclusions/action/preview/checkcategory.php';
if (issset($carray[$categoryname])) $carray[$categoryname][]= $arrayst;
else $carray[$categoryname] = [$arrayst];Schau mal, ob dir das weiter hilft.
Siehe hier:
https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/map
Ich hätte erwähnen sollen, dass Du die Überarbeitung am besten vor der Übergabe an die Bibliothek machst, dann ist es übersichtlicher. Würde dann etwa so aussehen:
// Test ist dein originales Array
var test2 = Test.map(function(item) {return item * 200;});Dann das neue Array test2 übergeben:
var Objekt1 = document.getElementById('Button')
var chart = new Chart(Nummer1, {
type: 'line',
data: {
labels: Jahre ,
datasets : [{label:"Objekt1",
data: test2 // hier das überarbeitete Array übergeben
}]}});Nein, so einfach ist es leider nicht. Du musst schon Element-für-Element das Array abarbeiten und den jeweiligen Eintrag mi 200 mulitplizieren. Recht elegant geht das mit der Funktion map().
Verstehe es immer noch nicht richtig. Wo werden die Werte true/false denn ausgegeben? Und ist $arrayst nun ein Array oder ein einfaches boolean?
Zum Teil verstehe ich es besser, zum Teil bin ich noch am Schwimmen: $arrayst ist, wie der Name sagt, ein Array? Und in dieses Array werden die Werte der einzelnen Module eingetragen? Und dein Problem ist, dass die alten Werte darin stehen bleiben? Dann versuche dies:
$arrayst = [];
require 'inclusions/action/preview/checkcategory.php';
$carray[] = $arrayst;Wenn Du dem Array $carray ein Array $arrayst hinzu fügst, wird das Ganze zweidimensional.
Mal sehen, ob ich das richtig verstehe: Zu jeder Kategorie kann es mehrere Module geben. Ist mindestens ein Modul einer Kategorie online, gilt die ganze Kategorie als online. Und jetzt willst Du, wie in dem früheren Thread, ermitteln, ob alle Kategorien online sind.
Wenn das zutrifft, sollte es zum Ziel führen, wenn Du das Array zweidimensional anlegst, 1. Dimension die Kategorien, 2. Dimension die Module.
Bis hierher bin ich von deiner verbalen Beschreibung ausgegangen, aber wenn ich in deinen Code sehe, finde ich keine Module? Ist das so aufgebaut, dass es mehrere Einträge mit dem selben Kategorienamen gibt und dass diese dann die Module sind? *gübel*
PS: Ich vergaß ganz das CSS, das muss natürlich auch auf Klassen umgestellt werden:
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}Das erfordert nur ein paar kleine Änderungen:
Im HTML die IDs durch Klassen ersetzen:
<img class="myImg" src="../Bilder/2.jpg" alt="Snow" style="width:100%;max-width:300px">
<img class="myImg" src="../Bilder/3.jpg" alt="Snow" style="width:100%;max-width:300px">
<img class="myImg" src="../Bilder/4.jpg" alt="Snow" style="width:100%;max-width:300px">
<img class="myImg" src="../Bilder/6.jpg" alt="Snow" style="width:100%;max-width:300px">Und im Javascript eine Schleife über die Bilder:
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
// Get a node list of all images
var images = document.querySelectorAll(".myImg");
// Loop over these images
for (var i = 0; i < images.length; i++) {
// Provide current image
var img = images[i];
// Add an event listener for "click"
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
</script>Was ist denn der Sinn der ganzen Sache, bzw. warum schreibst das Tag nicht einfach an der richtigen Stelle in den HTML-Text? Wenn man das weiß, kann man die Frage u. U. gezielter beantworten.
Ich verstehe es so, dass der TO das Skript für mehrere Bilder verwenden will, was wegen der Verwendung einer ID so, wie es ist, nicht möglich ist (var img = document.getElementById("myImg");).