Question

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

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

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

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

1 个答案: