我想将"-h.png"
添加到< div id="swap" >
中所有img src的末尾,同时将鼠标悬停/悬停在< img src="images/logo.png" />
上并返回".png"
mouseout
这就是我所拥有的而且它不起作用:
<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);
});
});
答案 0 :(得分: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);
});
});
});
答案 1 :(得分: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);
});
答案 2 :(得分:0)
试试此代码
$(document).ready(function() {
$('#site-logo').hover(function(){
$('#swap img').attr('src','-h.png');
},
function(){
$('#swap img').attr('src','.png');
});
});
OR
$(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');
});
});
});
答案 3 :(得分: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 />");
});
});