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

Question

我主要使用 PHP/HTML/CSS 和一些 JavaScript。
我有一个 foreach 循环，它将显示网格中的元素列表。左边将显示一个产品，在右边我希望能够点击一个图像，当点击时，更改为不同的图像。

我成功了，但是因为我在 foreach 循环中有“ flavor ”，虽然列出的每个元素都是新的，但图像仍然共享相同的代码，因此，当我在 flavor 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>