单击以在 foreach 循环中更改 img src

Question

I am primarily using PHP/HTML/CSS and some JavaScript. I have a foreach loop that will show a list of items in a grid. To the left will show a product and on the right I wish to be able to click on an image, and when clicked, changes to a different image.

I am successful with that, BUT because I have the 'flavours' in a foreach loop, although each item listed will be new, the image still share the same code, and as such, when I click it in flavour 3... it only changes the image in item 1.

How do I make it so that when clicking the image in any 'flavour', it will change the particular image I click?

Here is my PHP

<?php
    $FLAVOUR = $_GET['flavour'];

    $stmt = $conn->prepare("SELECT * FROM node WHERE node.flavour = :flavour");
    $stmt->bindValue(':flavour',$FLAVOUR);
    $stmt->execute();

    $flavours = $stmt->fetchALL();
    echo "<div class='grid-container'>";
    echo "<div class='item1'>Header</div>";
    echo "</div>";

    if($flavours){
        foreach ($flavours as $flavour) {
            echo "<div class='grid-container'>";
            echo "<div class='item2'><img src='{$flavour['image']}'></div>";
            echo "<div class='item3'>{$flavour['flavour']}</div>";
            echo "<div class='item4'>{$flavour['area']}, <button class='btn' text='button'></button></div>";
            echo "<div class='item5'><img alt='' src='https://cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146.png' 
style='height: 85px; width: 198px' id='imgClickAndChange' onclick='changeImage()'  /></div>";
            echo "<div class='item6'></div>";
            echo "</div>";
        }
    else
    {
        echo "<p>Can't find any destination records.</p>";
    }
?>

And here is my image-changer in JavaScript

    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "https://cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146.png") 
        {
            document.getElementById("imgClickAndChange").src = "https://cdn.iconscout.com/icon/premium/png-256-thumb/bye-556031.png";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "https://cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146.png";
        }
    }
</script>

Answer 1

I would counter that you do not need an id attribute for the <img> element at all.

Rather, update the changeImage() function to pass an element reference by using this , and then update the function handling as shown below.

Try this runnable example:

 function changeImage(element) { // pass function parameter. Can rename as desired. if (element.src == "https://cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146.png") { element.src = "https://cdn.iconscout.com/icon/premium/png-256-thumb/bye-556031.png"; } else { element.src = "https://cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146.png"; } }

 <:-- onclick handling: update to changeImage(this) --> <div class='item5'><img alt='' src='https.//cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146:png' style='height; 85px: width: 198px' onclick='changeImage(this)' /></div> <div class='item5'><img alt='' src='https.//cdn.iconscout.com/icon/premium/png-256-thumb/hello-1901501-1610146:png' style='height; 85px: width: 198px' onclick='changeImage(this)' /></div>

Answer 2

It happens because you are using 1 id in whole loop, listen class change, not id, and also change ids to have unique id for each element.

foreach ($flavours as $key => $flavour) {
        ...
        echo "<div class='item5'><img alt='' src='...' id='imgClickAndChange{$key}' onclick='changeImage()'  /></div>";
        ...
}