如何让modal在一段时间内从按钮获取值

Question

我写了一个while循环，它显示了我保留的图片，当用户按下图片中的按钮时，我想要弹出一个包含图片的模式。这是我写的展示产品的代码，当他按下按钮然后"onclick“时，它设置了一个会话，我存储了图片的图像，并在模式上显示，但这不起作用。它只拍摄显示的最后一张图片。怎样才能显示我选择的图片？

<?php
$query_name="SELECT * FROM products WHERE active='1' ";
$result =  mysqli_query($conn, $query_name);
while($rows=mysqli_fetch_assoc($result))
{
    ?>

    <div class="block2">
        <div class="block2-pic hov-img0">
            <img  src="img/<?php echo $rows['picture']; ?> " alt="">

            <button href="#" onclick="<?php $_SESSION['what_picture']=$rows['picture']; ?>" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                Quick View
            </button>
        </div>

            
    </div>

<?php } ?>

这是模式

<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
    <div class="overlay-modal1 js-hide-modal1"></div>

    <div class="container">
        <div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
            <button class="how-pos3 hov3 trans-04 js-hide-modal1">
                <img src="images/icons/icon-close.png" alt="CLOSE">
            </button>

            <div class="row">
                <div class="col-md-6 col-lg-7 p-b-30">
                    <div class="p-l-25 p-r-30 p-lr-0-lg">
                        <div class="wrap-slick3 flex-sb flex-w">
                            <div class="wrap-slick3-dots"></div>
                            <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>

                            <div class="slick3 gallery-lb">
                                <div class="item-slick3" data-thumb="images/product-detail-01.jpg">
                                    <div class="wrap-pic-w pos-relative">
                                        <img src="img/<?php echo $_SESSION['what_picture']; ?>" alt="IMG-PRODUCT">

                                        <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="images/product-detail-01.jpg">
                                            <i class="fa fa-expand"></i>
                                        </a>
                                    </div>
                                </div>

                                
                            </div>
                        </div>
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
</div>

Answer 1

您必须对目标元素执行ajax操作，并在模型中显示

Answer 2

你在这里犯的错误是在这个链接中

onclick="<?php $_SESSION['what_picture']=$rows['picture']; ?>"

这里的问题是，在onclick属性中，您没有调用任何JavaScript函数。您需要解决的是，使用$rows'picture'作为参数调用一个函数。

例如。

onclick="setModelPicture(<?php echo $rows['picture']; ?>)"

除此之外，你还需要做两件事。

1. 为我们想要作为

目标的图像提供一个"id“

产品img id="dynamic-model-picture“alt=”IMG-

“

为了将模型内部的图像设置为传递给函数setModelPicture.的内容，

1. 需要定义以下JavaScript函数

图片函数图片(

){ document.getElementById("dynamic-model-picture").src =setModelPicture；}

在上面的场景中，每当用户单击图像时，图片的路径(我相信是在$rows'picture')中)被传递给setModelPicture函数，并从那里更新图像src属性。