1

嗨，我有这段 html...

<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”类上时，所有带有类选项卡的子图像都会在其 src 中添加一个“o”...例如（/images/2o.png 或 /images/3 .png/)。

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

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

帮助表示赞赏。

4

3 回答 3

2

尝试

$('.swfselector').each.hover(function(){ 
     $(this).find('.tab').each(function() {
          $(this).attr("src", 
               $(this).attr("src").replace(".png", "o.png"));  
     })
});
于 2011-04-21T10:12:29.953 回答
2

这对你有用

    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基本上在 swfselector 的末尾添加一个数字。然后快速创建一个新的 jQuery 事件。

如果我说的不够清楚，看看这个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-21T10:46:06.930 回答
0

认为这应该有效：

$('.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-21T10:12:23.230 回答