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 编写的图像更改器(mutator)

    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>