Нажмите, чтобы изменить img sr c в цикле foreach

Question

Я в основном использую PHP / HTML / CSS и некоторые JavaScript. У меня есть foreach l oop, который покажет список элементов в сетке. Слева будет показан продукт, а справа я sh смогу щелкнуть изображение, а при щелчке - другое изображение.

У меня все получилось, НО потому что я иметь 'flavors' в foreach l oop, хотя каждый из перечисленных элементов будет новым, изображение все еще будет иметь тот же код, и поэтому, когда я щелкаю по нему в аромате 3 ... оно только меняет изображение в элементе 1.

Как мне сделать так, чтобы при нажатии на изображение любым «ароматом» оно меняло конкретное изображение, которое я нажимаю?

Вот мой 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>";
    }
?>

А вот мой сменщик изображений в 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

Я бы сказал, что вам вообще не нужен атрибут id для элемента <img>.

Вместо этого обновите функцию changeImage(), чтобы передать ссылку на элемент с помощью this, и затем обновите обработку функции, как показано ниже.

Попробуйте этот работающий пример:

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

Это происходит потому, что вы используете 1 идентификатор в целом l oop, слушаете изменение класса, а не идентификатор, а также меняете идентификаторы, чтобы иметь уникальный идентификатор для каждого элемента.

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