jquery 将鼠标悬停在图像上以交换上面 div 中的另一个图像

Question

我想添加"-h.png"到 < div id="swap" > 中所有 img src 的末尾当鼠标悬停/悬停在 < img src="images/logo.png" /> 上时同时并返回".png"鼠标移出

这是我所拥有的，但它不起作用:

<div id="header-wrap">
    <div id="swap">
        <img src="images/4.png"/>
        <img src="images/3.png"/>
        <img src="images/2.png"/>
        <img src="images/1.png"/>
    </div>
    <header id="header">
        <div id="site-logo"><a href="#"><img src="images/logo.png" /></a></div>
    </header>
</div><!-- /#header-wrap --> 

$(document).ready(function() {     
    $('#site-logo').hover(function(){     
        $('#swap img').replace('.png','-h.png');    
    },     
    function(){    
        $('#swap img').replace('-h.png','.png');     
    });
});

刚刚更新到下面...图像现在正在交换，但所有 4 个图像都交换到/4-h.png 而不是 4-h.png、3-h.png、2-h.png 和 1-h .png

$(document).ready(function() {
    var newSrc = "";
    $('#site-logo').hover(function(){
        newSrc = $('#swap img').attr('src').replace('.png','-h.png');   
        $('#swap img').attr('src', newSrc);
    },     
    function(){
        newSrc = $('#swap img').attr('src').replace('-h.png','.png');     
        $('#swap img').attr('src', newSrc);
    });
}); 

Answer 1

试试这个:

    /* so it's not working
    $(document).ready(function() {     
        $('#site-logo').hover(function(){     
            $('#swap img').attr('src').replace('.png','-h.png');    
        },     
        function(){    
            $('#swap img').attr('src').replace('-h.png','.png');     
        });
    });
    */

<小时/>

好吧，我发现 .replace 方法是纯粹的 JavaScript试试这个:

$(document).ready(function() {
    var newSrc = "";
    $('#site-logo').hover(function(){
        $('#swap img').each(function() {
           newSrc = $(this).attr('src').replace('.png','-h.png');   
           $(this).attr('src', newSrc);
        });
    },     
    function(){
        $('#swap img').each(function() {
           newSrc = $(this).attr('src').replace('-h.png','.png');     
           $(this).attr('src', newSrc);
        });
    });
});