只是.attr（）

我定位在大DIV中這樣只是.attr（）

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

當用戶將鼠標懸停在<div id="editorial">（鼠標懸停）一個img HTML塊<img src="folder1/folder2/folder3/logo1.png">我想讀的<img>的屬性，它是一個組成部分folder1/folder2/folder3/logo1.png從此與jquery .html() function提取logo1.png並添加on_的標誌（on_logo1.png），然後輸出到overwritte <div id="img_editorial">

鼠標移開時我想回到logo1.png ...因爲我有m個在那個父div的多重背景變化...所以基本功能是灰色的標誌，當鼠標是一個大的div（也div的背景變化...等）...

所以..如何我讀了<img>屬性，然後提取logo1.png，而不是整個folder1/folder2/folder3/logo1.png ...

來源

2011-07-07 pufos

發揮你爲什麼不能用css效果上做的鼠標？ – AbstractChaos

，因爲我有很多不同尺寸的徽標 – pufos

您可以通過一些JavaScript數組推送，彈出和加入呼叫來做到這一點。 – andyb

您可以閱讀這樣的屬性：

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;

所以數組中的最後一個值應該始終是文件的名字 - 沒有無論目錄樹有多長時間。

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

祝你好運。

來源

2011-07-07 13:00:55 YonoRan

有一個函數可以告訴數組有多長？（像'count'或其他）...'var abc = count（split_img_src []）...然後到split_img_src [abc]'??? – pufos

'split_img_src [split_img_src.length - 1]'會給你最後一個元素。雖然快速谷歌搜索會告訴你：P –

非常感謝......我明白...... – pufos

以下應該做你想做的。它只是使用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')); 
});

The demo排序的作品，但我沒有_on圖像，它只是404。我希望你明白:-)

來源

2011-07-07 13:13:24 andyb

這裏！只是一個很好的解決方案：

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

來源

2011-07-07 13:44:28

感謝日誌..讚賞它... – pufos

回答

相關問題