Question

我有一个img html块<img src="folder1/folder2/folder3/logo1.png">位于像这样的大型div中

<div id="editorial">
   <div id="img_editorial"><img src="folder1/folder2/folder3/logo1.png" /></div>
</div>

当用户悬停<div id="editorial">（鼠标悬停）时，我想阅读<img>的{{1}}属性folder1/folder2/folder3/logo1.png从中提取logo1.png并添加on_到徽标（on_logo1.png），然后用jquery .html() function输出，以覆盖<div id="img_editorial">

在mouseout上我想返回logo1.png ...因为我在父div中有多个背景更改...所以基本功能是当鼠标在一个大div（也是div）时灰显徽标`s背景改变......等等）......

那么..我怎样才能阅读<img>属性，然后解压logo1.png而不是整个folder1/folder2/folder3/logo1.png ......

Answer 1

你可以这样读取属性：

var img_src = $('#img_editorial img').attr('src');

这会给你：

folder1/folder2/folder3/logo1.png

你可以将它拆分为：

var split_img_src = img_src.split('/');

这会给你一个数组，如：

split_img_src[0] = folder1;
split_img_src[1] = folder2;
split_img_src[2] = folder3;
split_img_src[3] = logo1.png;

所以数组中的最后一个值应该始终是文件的名称 - 无论目录树有多长。

所以你现在有了文件名，你可以追加你想要的东西，做任何你需要的东西。

祝你好运。

Answer 2

下面！只是一个很好的解决方案：

$('#img_editorial img').hover(function(){

   imgSrc = $(this).attr('src');
   var imgSplit = imgSrc.split('/');
   var imgName = imgSplit[3];

   $(this).attr('src', imgSrc.replace(imgName, 'on_'+imgName) );

},function(){

    $(this).attr('src', imgSrc);

});

如果需要，请打开Firebug并使用此DEMO

Answer 3

以下应该做你想做的事。它只使用jQuery .data() API存储原始图像，并在<div>的{{3}}时将其放回。

$('div#editorial').mouseenter(function() {
    var originalSrc = $('img', this).prop('src');
    $(this).data('originalSrc', originalSrc);
    var pathComponents = originalSrc.split('/');
    var logo = pathComponents.pop();
    pathComponents.push('on_' + logo);  
    $('img', this).prop('src', pathComponents.join('/'));
}).mouseleave(function() {
    $('img', this).prop('src', $(this).data('originalSrc'));
});

.mouseleave() 有点有效，但我没有_on图片所以只有404s。我希望你能得到这个想法： - ）

只是.attr（）的一部分

3 个答案: