TL; DR

Question

php数据变量（img，名称，id等）作为多维数组从数据库中填充。使用js。选择较小的缩略图，并将较大的显示的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>

// JavaScript Document
<!-----REPLACE-img----->
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 = e.target.src;
 current.classList.add("fade-in");

 setTimeout(() => current.classList.remove("fade-in"), 500);
e.target.style.opacity = opacity;`}`

<!-----REPLACE-NAME----->
<script>    
document.querySelectorAll(".imgs img").getElementById("prdName")
.onclick = function() {swapName()};
function swapName(){
document.getElementById('currentProfile')
.setAttribute('value', '<?php echo $name ?>');
</script>

Answer 1

TL; DR

您使用的函数仅交换姓氏，因为您正在使用 <?php echo $name ?>在循环之外。因此$name的值是循环中最后一个元素的值。为了解决这个问题，您必须从被单击的实际元素中获取JS的值，而不是从PHP本身获取。

-建议-

您正在为每个图像复制ID prdName，因此getElementById id的行为不可靠，请查看this answer to another question。

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

此外，我建议您对标签使用更像JavaScript的方法，以简化功能。使用当前代码，您正在生成以下HTML：

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

这既不理想，也不是有效的HTML，您的标记不能同时是图像和。如果您想要一张图片，则必须完全删除input关键字，将type="hidden"更改为togheter，然后将值更改为data-name之类的内容，也可以删除onclick，因为我们要在javascript中附加处理程序。

下面是一个可以更好地说明自己的代码示例：

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

将产生此标记

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

我认为这更清洁，更容易使用。

然后，您可以合并功能imgClick和swapName。

为此，您必须从图像中获取值，也许使用data-*属性。在事件监听器函数imgClick中，您可以使用this来引用图像，并使用data-name属性来设置名称。

这是您的javascript重做：

<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>

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

1 个答案:

TL; DR

-建议-