jQuery的：儿童形象的href源

您好我有这一块HTML的父母悬停改变部分...jQuery的：儿童形象的href源

<a href="alcohol_calculator.php" class="swfselector"> 
&raquo; Alcohol unit calculator prototype 
<img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> 
<img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> 
<img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> 
<img class="tab" src="/images/5.png" width="30" height="28" alt="5" /> 
</a> 

<a href="bouncing_ball.php" class="swfselector"> 
&raquo; Bouncing ball animation 
<img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> 
</a>

使用jQuery，我希望它这样，当有人悬停在一个“swfselector”类所有带有类别选项卡的子图像将“o”添加到其src ...例如（/images/2o.png或/images/3.png/）中。

我有这个到目前为止，但它什么都没做，并且会在“.png”之后添加“o”。

$('.swfselector').each.hover(function(){ 
    $(this).find('.tab').attr('src'+'o'); 
});

帮助感谢。

来源

2011-04-21 George Reith

这会为你

var done1 = 0; 
$('a.swfselector1').live('hover', function() { 
    if(done2 != 1){ 
     $(this).find('.tab').each(function() { 
      $(this).attr("src", 
      $(this).attr("src").replace(".png", "o.png")); 
      done1 = 1; 
     }) 
    } 
}); 
var done2 = 0; 
$('a.swfselector2').live('hover', function() { 
    if(done2 != 1){ 
     $(this).find('.tab').each(function() { 
      $(this).attr("src", 
      $(this).attr("src").replace(".png", "o.png")); 
      done2 = 1; 
     }) 
    } 
});

不幸的是，要做到这一点，我发现最简单的方法是改变工作多个a标签的a标签的类名具有h功能。基本上在swfselector的末尾添加一个数字。然后快速创建一个新的jQuery事件。

如果我没有足够清楚，看看this jsFiddle这将更容易理解。

最终结果（与乔治联合小组工作）：

$('.swfselector').live('mouseover mouseout', function() { 
if (event.type == 'mouseover') { 
    $(this).find('.tab').each(function() { 
     $(this).attr("src", $(this).attr("src").replace(".png", "o.png")); 
    }) 
} //end of if 
    else { 
      $(this).find('.tab').each(function() { 
      $(this).attr("src", $(this).attr("src").replace("o.png", ".png")); 
      }) 

    }//end of else 

});//end of mouseover/mouseout

来源

2011-04-21 10:46:06 ryryan

谢谢这个工作，但我会有很多这些在页面上的swf选择器（超过一百）......这意味着一个巨大的CSS和JS文件。我也会一直将done2更改为if语句中的最后一个事件变量吗？我现在感觉更近了。 – 2011-04-21 11:13:25

是的，你必须改变做最新的号码。就像done1，done2 ...等等。我正在以另一种方式工作。 – ryryan 2011-04-21 11:17:55

刚刚意识到不需要在swf选择器的末尾添加数字，因为它只影响您悬停的那个数字。你知道我会如何反转这个悬停，以便它可以再次运行，如果你悬停在不同的？ – 2011-04-21 11:19:30

认为这应该工作：

$('.swfselector').each.hover(function(){ 
    $('img.tab', this).each(function() { 
    var src_parts = this.src.split('.');//divide src by '.' symbol 

    src_parts[src_parts.length - 2] += 'o';//add 'o' before extension '.' 
    this.src = src_parts.join('.');//join back src with 'o' 
    } 
});

来源

2011-04-21 10:12:23

感谢您的帮助，但是这似乎并没有被做任何事情，也给了我一个“，‘对象不支持此属性或方法’错误:( – 2011-04-21 11:05:59

尝试

$('.swfselector').each.hover(function(){ 
    $(this).find('.tab').each(function() { 
      $(this).attr("src", 
       $(this).attr("src").replace(".png", "o.png")); 
    }) 
});

来源

2011-04-21 10:12:29 potatopeelings

实际上我认为你可以通过使用$（this）.find（'.tab'）.attr（“src”，$（this）.attr（“src”）。replace（“ .png“，”o.png“））;但我没有在这里设置jQuery来尝试它:-( – potatopeelings 2011-04-21 10:17:44

干杯的输入，但我不能得到这个工作，什么都没有发生:(什么更多IE是给我一个“对象不支持这个属性或方法行：1个字符：1代码：0”错误 – 2011-04-21 11:02:50

jQuery的：儿童形象的href源

回答

相关问题