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

问题描述：

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

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

添加你已经试过，什么是不工作的。目前这不是问题。 –

答

您可以通过向点击的图像添加一个类，然后将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中选择并获取图像名称

相关推荐