3

マウスオーバー/ホバーオーバーしてマウスアウトに戻ると同時に、"-h.png"すべての img src の最後に追加したいと思います< div id="swap" >< 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、3-h.png、2-h.png、および1-h.pngではなく/4-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);
    });
});
4

4 に答える 4

1

この方法を使用するだけで、これを試すこと.slice()ができ、目標を達成できます。

$('#site-logo').hover(function () {
   var atr = $('#swap img').attr('src').slice(0, -4);
   var newAtr = atr+'-h.png'
   $('#swap img').attr('src', newAtr);
},function () {
   var atr = $('#swap img').attr('src').slice(0, -6);
   var newAtr = atr+'.png'
   $('#swap img').attr('src', newAtr);
});

フィドルをチェックアウト: http://jsfiddle.net/6vqJV/

于 2013-01-11T06:39:15.477 に答える
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);
        });
    });
});
于 2013-01-11T06:19:47.373 に答える
0

このコードを試してください

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

また

$(document).ready(function() {     
        $('#site-logo').hover(function(){     
            $('#swap img').each(function(){
$(this).attr('src','-h.png');
             });    
        },     
        function(){    
            $('#swap img').each(function(){
$(this).attr('src','.png');
});
        });
    });
于 2013-01-11T06:28:09.710 に答える
0 
$("#site-logo").hover(function () {

  $("#swap img").each(function () {
    var test = $(this).attr('src');
    $("#helper").append("<span>" + test.replace('.png', '-h.png') + "</span><br />");
  });

},

function () {
  $("#swap img").each(function () {
    var test = $(this).attr('src');
    $("#helper2").append("<span>" + test.replace('-h.png', '.png') + "</span><br />");
  });

});

リンクのテスト

于 2013-01-11T06:43:33.120 に答える