Javascript 替换php元素（图像和名称），单击js

php数据变量img、name、id等作为多维数组从数据库中填充。使用js。选择较小的缩略图，并将显示的较大img和info更改为选定的缩略图。它几乎起作用了！Img更改，但仅更改阵列中的最后一个信息

<!-----GALLERY_IMAGES----->
<?php
$sql = "SELECT * FROM products WHERE subject LIKE '%$subject%' OR
 alt_name LIKE '%$subject%'";

$total = mysqli_query($conn, $sql);
$array = array();
while ($column = mysqli_fetch_assoc($total)) {
$id = $column['id'];
$name = $column['name'];
$img = $column['img'];
$catagory = $column['catagory'];

$array[] = array(
"id" => $id,
"name" => $name,
"img" => $img,
"designer" => $designer,
"catagory" => $catagory,);

$itemArray .=
'<img src="img_prd/' . $img . '"
input id="prdName"
type="hidden"
value="' . $name . '"
onclick="swapName()"/>';}
?>  

<div class="images">    
<div class="imgs"><?php 
echo($itemArray);
?>
</div>

TL；博士 您只能交换姓氏，因为您正在使用 在循环之外。因此$name的值是循环中最后一个元素的值。要解决这个问题，必须使用JS从被单击的实际元素获取值，而不是从PHP本身获取值

-暗示- 您正在为每个图像复制id prdName，因此getElementById id的行为不可靠，请查看

我建议您使用一个类和一个循环，将click事件处理程序附加到每个元素

此外，我建议您对标记使用更类似于javascript的方法，以简化函数。使用当前代码，您将生成以下HTML：

<img src="img_prd/something.jpg"
     input id="prdName"
     type="hidden"
     value="something_else"
     onclick="swapName()"
/>

将生成此标记

<img src="img_prd/something.jpg" data-name="something_else"/>

---

$itemArray数组最初设置为什么？设置为包含image src和nameHi的变量！谢谢你的回复！。。我明白你关于使用类的意思，并且已经改变了它。我正在调查forEach for js。但还是很困惑。有没有办法对图像和prdname使用相同的forEach imgclick？我已经编辑了我的答案来实现这个概念，如果需要，根据您的需要调整代码。

$itemArray .=
'<img src="img_prd/'. $img .'"data-name="'. $name .'"/>';

<img src="img_prd/something.jpg" data-name="something_else"/>

<script>
    const current = document.querySelector("#current");
    const imgs = document.querySelectorAll(".imgs img");
    const opacity = 0.6;

    imgs[0].style.opacity = opacity;
    imgs.forEach(img => img.addEventListener("click", imgClick));
    function imgClick(e) {
        imgs.forEach(img => (img.style.opacity = 1));

        current.src = this.src;
        current.classList.add("fade-in");

        setTimeout(() => current.classList.remove("fade-in"), 500);
        this.style.opacity = opacity;
        document
            .getElementById('currentProfile')
            .setAttribute('value', this.getAttribute('data-name'));
    }
</script>