单击图像时显示弹出窗口

Question

我正在使用此代码来显示图像。 问题是它只显示第一个图像而不是其余图像的弹出窗口。 图像从数据库加载，因此它们都具有相同的 ID。 是这个问题还是别的什么？

代码：

        if (ViewBag.ReceptiSearchAll != null)
        {

            <div class="col-6 col-lg">
               @foreach (var images in ViewBag.ReceptiSearchImages)
                {                                              

                    if (images.Image != null)
                    {
                        imagePath = images.Image;
                    }
                    else
                    {
                        imagePath = images.ImageDefault;
                    }

                    <div class="card mb-3" style="max-width: 400px;border:none">
                        <div class="row no-gutters">
                            <div class="col-md-12">

                                <img id="imgrec" class="card-img-top" src="data:image;base64,@System.Convert.ToBase64String(imagePath)" alt="Slika recepta" width="250" height="200">

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


<script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById("imgrec");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    }
</script>


     

Answer 1

您所有的图片都具有相同的 ID。

id 是唯一标识符。

var img = document.getElementById("imgrec");

因此，只有您的第一张图片才能获得此信息。

img.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }