在 html 中选择并获取图像名称答案

【问题标题】：Select and get image name in html在 html 中选择并获取图像名称
【发布时间】：2017-05-30 21:50:39
【问题描述】：

首先我需要选择其中一个图像，然后我会显示选择了哪个图像（可能带有边界框），最后我需要在我的页面（例如底部）打印所选图像的名称。

    <!DOCTYPE html>
    <html>
    <head></head>

    <body>

    <div>
    <img img src = "http://www.juventus.com/pics/layout/open-graph-fallback.jpg" onmouseover="" style="cursor: pointer;">
    <img img src = "http://okeskor.com/wp-content/uploads/2016/01/Prediksi-Skor-Real-Betis-vs-Real-Madrid-25-Januari-2016.jpg" onmouseover="" style="cursor: pointer;">
    </div>

    </div>
</body>
</html>

【问题讨论】：

添加您尝试过的和无效的。目前这不是一个问题。

标签： javascript jquery html

【解决方案1】：

您可以通过将类添加到单击的图像然后将 CSS 应用于该类来突出显示选择的图像。我不确定您所说的“所选图像的名称”是什么意思，但假设您指的是文件名，您可以获取单击图像的src 属性并使用substring() 和lastIndexOf() 从图片来源。

$(function() {
  $('img').click(function() {
    var src = $(this).attr('src'),
        filename = src.substring(src.lastIndexOf('/')+ 1);
    $('img').removeClass('selected');
    $(this).addClass('selected');
    $('.selected-image span').text(filename);
  });
});

img {
  cursor:pointer;
}
  img.selected {
    border:5px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img img src = "http://www.juventus.com/pics/layout/open-graph-fallback.jpg" />
  <img img src = "http://okeskor.com/wp-content/uploads/2016/01/Prediksi-Skor-Real-Betis-vs-Real-Madrid-25-Januari-2016.jpg" />
</div>
<div class="selected-image">Selected: <span></span></div>

【讨论】：