Javascript 如何基于图像缩略图使用onclick-on-anchor标记打开（全屏）图像

我想根据图像缩略图在弹出div上显示图像。 单击一次图像/缩略图/apple.jpg将打开一个弹出的图像/actual/apple.jpg

HTML

<div class="row">
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
                    <a onclick="showImg()" class="d-block mb-4 h-100">
                        <img class="img-fluid img-hov" src="images/thumbnails/pencil.jpg" alt="1">
                    </a>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
                    <a onclick="showImg()" class="d-block mb-4 h-100">
                        <img class="img-fluid img-hov" src="images/thumbnails/pencil2.jpg" alt="1">
                    </a>
                </div>
//another option is using onclick in img tag if this makes easy.
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 web zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/web.jpg" alt="">
                    </div>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 sketch zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/sketch.jpg" alt="1">
                    </div>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 sketch zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/sketch2.jpg" alt="">
                    </div>
                </div>
</div>

<div id="imgbox" class="d-none">
    <div id="mainimg">

    </div>
</div>

//另一个选择是使用onclick-in-img标记，如果这样做很容易的话。

假设我想展示这张照片里面的图像

HTML

<div class="row">
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
                    <a onclick="showImg()" class="d-block mb-4 h-100">
                        <img class="img-fluid img-hov" src="images/thumbnails/pencil.jpg" alt="1">
                    </a>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
                    <a onclick="showImg()" class="d-block mb-4 h-100">
                        <img class="img-fluid img-hov" src="images/thumbnails/pencil2.jpg" alt="1">
                    </a>
                </div>
//another option is using onclick in img tag if this makes easy.
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 web zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/web.jpg" alt="">
                    </div>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 sketch zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/sketch.jpg" alt="1">
                    </div>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 sketch zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/sketch2.jpg" alt="">
                    </div>
                </div>
</div>

<div id="imgbox" class="d-none">
    <div id="mainimg">

    </div>
</div>

我的想法是获得点击链接的src，然后用react on src替换缩略图，并添加到HTML中

JS

function showImg() {
    var imgbox = document.getElementById("imgbox");
    imgbox.classList.toggle("d-none");
    document.getElementById("mainimg").innerHTML = "<img class='img-fluid' src='I dont know'>";
}

函数showImg（）{
var imgbox=document.getElementById（“imgbox”）；
imgbox.classList.toggle（“d-none”）；
document.getElementById（“mainimg”）.innerHTML=“”；
}

请帮助我使用showImg（）函数使其正常工作。

您必须定义“实际图像url”。在这种情况下，可以在函数中定义此值

<div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
  <a onclick="showImg('images/actual/pencil.jpg')" class="d-block mb-4 h-100">
    <img class="img-fluid img-hov" src="images/thumbnails/pencil.jpg" alt="1">
  </a>
</div>

您可以访问函数中的值，如下所示：

function showImg(imageUrl) {
  document.getElementById("mainimg").innerHTML = "<img class='img-fluid' src='"+imageUrl+"'>";
}

函数showImg（imageUrl）{
document.getElementById（“mainimg”）.innerHTML=“”；
}

谢谢你的回答，这比我想象的要好得多，而且很有效，但我只是想知道是否可以获得单击的div或anchor的src。当然可以。您可以访问src属性。将“this”参数添加到onclick事件中的“showImg”函数中。如果您的完整映像名称不同，则可以定义数据属性并访问它。