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

【问题标题】：Click to change img src within foreach loop单击以在 foreach 循环中更改 img src
【发布时间】：2020-06-07 12:01:54
【问题描述】：

我主要使用 PHP/HTML/CSS 和一些 JavaScript。我有一个 foreach 循环，它将显示网格中的项目列表。左边会显示一个产品，右边我希望能够点击一张图片，点击后会变成另一张图片。

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

【问题讨论】：

标签： javascript php css foreach onclick

【解决方案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>

【讨论】：

非常感谢这个，简单而有效 - 我应该更多地研究元素的使用。这立即解决了我的问题。

【解决方案2】：

发生这种情况是因为您在整个循环中使用了 1 个 id，监听类更改，而不是 id，并且还将 id 更改为每个元素都有唯一的 id。

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

【讨论】：

谢谢你，鲁本。你说的很有道理，但我发现保罗决心要对我的处境更好。