只是.attr()的一部分

Just a part of .attr()

本文关键字：一部分 attr 只是      更新时间：2023-09-26

我有一个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>的属性，即folder1/folder2/folder3/logo1.png，从中提取logo1.png，并将on_添加到徽标(on_logo1.png)中，然后用jquery .html() function输出以覆盖<div id="img_editorial">

在鼠标退出，我想返回到logo1.png…因为我在父div中有多个背景更改。所以基本的功能是灰色的标志，当鼠标在一个大的div(也div的背景变化…等)…

. .我怎么能读取<img>属性，然后提取logo1.png，而不是整个folder1/folder2/folder3/logo1.png…

你可以这样读这个属性:

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;

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

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

好运。

给!这是一个很好的解决方案:

$('#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

下面的应该做您想要的。它只是使用jQuery .data() API存储原始图像，并将其放在<div>的.mouseleave()上。

$('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'));
});

演示排序工作，但我没有_on图像，所以它只是404。我希望你能明白:-)

相关文章：