如何：Javascript 在没有路径的情况下点击获取文件名并将其插入到新图像中 link？

Question

这个想法是访问者点击缩略图，然后打开一个带有更大图像的模式。我试图在 onClick 上获取文件名（当访问者单击图像时），然后我想将其插入到现在打开的模式的 link 中以显示更大的图像。到目前为止，我只是为每张图片创建了一个模态，但这太长了。

这是我目前尝试的方法：

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

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

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

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

我尝试 google 一个 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;
 }

但我不知道我必须在哪里创建文件名变量，我也不知道如何创建在模式打开时将文件名插入另一个 link 的函数。

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

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>

如何：Javascript 在没有路径的情况下点击获取文件名并将其插入到新图像中 link？

How to: Javascript get file name on click without path and insert it into a new image link?

html

javascript

jquery

filenames

hyperlink