Laden einer Seite mit unfixierter Anzahl von Bildern, die sich ändern können

Question

Ich arbeite gerade an einer Webseite und bin in eine ziemlich schlechte Position geraten, wo ich Javascript und PHP auf eine Art und Weise mixe, die ich nicht denke sein (siehe Code unten zum Beispiel). Für den Rekord bin ich ein absoluter Noob in js, ich mache normalerweise nur Backend.

Was ich versuche zu erreichen, ist, Bildpfade aus der Datenbank (fertig) zu bekommen, sie auf dem Bildschirm anzuzeigen (wenn statisch) und dann einen sekundären Container, der nur das ausgewählte Bild (vom Benutzer) zeigt die Liste des geladenen Bildes.

Nun, wenn es statisch wäre, könnte ich nur mit PHP antworten und fertig sein, aber weil es nicht behoben ist, muss ich js verwenden, wo die Dinge schmutzig werden. Js "weiß nicht", wie viele Bilder es gibt, die Ids der Tags, um sie ändern zu können und so weiter.

Um zu verdeutlichen, werden alle Bilder in der Seite einmal in einigen PHP-Code ganz oben auf der Seite geladen, und dann sollte es nur über Js Umgang mit ihnen und bewegen sie herum und wählen Sie sie. Aber ich denke, alles, was ich jetzt brauche, ist eine Möglichkeit, die Werte von PHP an js zu übergeben und dann die Seite irgendwie über Javascript zu erstellen.

Gibt es eine einfache Möglichkeit zu tun, was ich sage?

Beispiel schmutziger Code:

<script> 

    var foodImages; 
    <?php $i = 0; ?> 

    var numberOfImages = <?php echo $count; ?>; 

    for(var i=0; i< numberOfImages; i++){ 
     foodImages.push(<?php echo $foodImages[$i]?>); 
     <?php $i ++; ?> 
    } 

    var selectedFood = <?php echo defaultSelected; ?>; 

</script> 

Vielen Dank und einen guten Tag!

Answer 1

Sie können nicht mehr als $ als count ($ array) in PHP zählen verwenden, entfernen Sie "$" zu sein:

<?php 
$numFoods=count($foodImages); 
?> 
    var numberOfImages = <?=$numFoods;?>; 

Answer 2

so dass Sie diese direkt auf das DOM in Ihrem PHP-Skript anwenden könnte;

<?php 
... 
foreach($foodImages as $image) { 
    ?><img src="<?php echo $image; ?>" class="food-image"><?php 
} 

und dann diese in Ihrem js aufnehmen;

<script> 
... 
var foodImages = document.getElementsByClassName('food-image'); 

Sie jetzt ein Array von DOM-Elemente in foodImages js Variable haben, wie Sie zu verwenden?