如何:Javascript在没有路径的情况下点击获得文件名，并将其插入到新的图像链接中

Question

这个想法是访问者点击缩略图，然后打开一个带有更大图像的模态。我试图在Click上获得文件名(当访问者点击图像时)，然后我想将其插入到现在打开的模态的链接中，以显示更大的图像。到目前为止，我只是为每个图像创建了一个模态，但这太荒谬了。

这就是我目前所尝试的：

这是带有标签的图像，用于打开模态。图像在缩略图文件夹中，我想将名称inst01.jpg保存到一个变量中。

<a href="#" data-toggle="modal" data-target="#imageModal"><img class="img-fluid" src="/images/thumbs/inst01.jpg" onclick="getName()"></a> 

这是模态。原始图像在图库文件夹中，我想将保存的文件名inst01.jpg插入链接以打开原始图像：

<div class="modal fade" tabindex="-1" role="dialog" id="imageModal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Image 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<img src="images/gallery/inst01sm.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

我试着在谷歌上搜索一个javascript函数，我想出了一个：

function getName() {
var fullPath = document.getElementById("img1").src;
var filename = fullPath.replace(/^.*[\/]/, '');
// or, try this, 
// var filename = fullPath.split("/").pop();
document.getElementById("result").value = filename;
}

但我不知道在哪里创建文件名变量，也不知道如何创建函数，当模态打开时，该函数会将文件名插入另一个链接。

我希望清楚我想做什么。感谢您到目前为止的阅读和帮助。

Answer 1

我不确定我是否遵循了你的意图，但我尝试了一下。我将getName重命名为setModalImageSrc，并将其更改为以当前图像为参数。我只提取图像名称(忽略路径的其余部分)，并使用它来使用模式/images/gallery/${clickedImageName}sm.jpg设置模态图像源。如果这不太正确，请告诉我我的假设哪里错了，我会调整的。

function setModalImageSrc(img) {
const fullPath = img.src;
const imageName = fullPath.match(/w+(?=.jpg$)/)[0];
document.getElementById("imgModal").src = `/images/gallery/${imageName}sm.jpg`
}

<a href="#" data-toggle="modal" data-target="#imageModal"><img class="img-fluid" src="/images/thumbs/inst01.jpg" onclick="setModalImageSrc(this)"></a> 
<div class="modal fade" tabindex="-1" role="dialog" id="imageModal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Image 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<img id="imgModal" src="/images/gallery/inst01sm.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>