帮助attr，mouseenter和mouseout无法正常运行

Question

我无法获取attr函数来更改类并保持它直到下一次单击。它也不会使用新的mouseenter和mouseout功能。我有什么想法吗？

HTML

<a href="" id="play" class="pause"><div id="playctrl"><img id="pausectrl" class="play" src="images/play1.png" ></div></a>

JQUERY

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });

    return false;
});

$('.play').mouseenter(function(){
    $(this).attr('src','images/play2.png');
}).mouseout(function(){
    $(this).attr('src','images/play1.png');
});

$('.paused').mouseenter(function(){
    $(this).attr('src','images/pause2.png');
}).mouseout(function(){
    $(this).attr('src','images/pause1.png');
});

以下是指向该网页示例的链接。 MMA Slideshow controls sample

Answer 1

您在链接上设置了src。你想这样做：

$(this).find('img').attr('src', 'myimage.png');

Answer 2

当你说：

  

它也不会使用新的mouseenter   和mouseout函数

我猜这是因为当你的代码运行时，你的对象还没有类，所以它们没有绑定到eventhandler。您可以使用实时函数正确绑定事件。

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });
  return false;
});

$('.play').live("mouseenter", function() {
  $(this).attr('src','images/play2.png');
});

$('.play').live("mouseout", function(){
  $(this).attr('src','images/play1.png');
});

$('.paused').live("mousenter", function() {
  $(this).attr('src','images/pause2.png');
});


$('.paused').live("mouseout", function(){
  $(this).attr('src','images/pause1.png');
});

Answer 3

您在错误的标签上设置src，请改用以下代码：

$("img.play", $(this)).attr('src', 'thenewimage.png');

部分'$（this）'是jQuery试图找到类'play'的图像的起始位置。在我看来，这是一个有效的解决方案..

完整的js代码：

$('.play').mouseenter(function(){
  $("img.play", $(this)).attr('src','images/play2.png');
  }).mouseout(function(){
  $("img.play", $(this)).attr('src','images/play1.png');
  });

HTML保持不变..

$('.paused').mouseenter(function(){
  $("img.play", $(this)).attr('src','images/pause2.png');
  }).mouseout(function(){
  $("img.play", $(this)).attr('src','images/pause1.png');
  });

`

Answer 4

第二部分：

$('.paused').mouseenter(function(){
  $(this).attr('src','images/pause2.png');
  }).mouseout(function(){
  $(this).attr('src','images/pause1.png');
});

最好使用jQuery设置类名，并使用CSS和image sprites进行图像替换。

类似的东西：

.paused {background: url(/images/paused.png) 0 0 no-repeat;}
.paused:hover {background-position: 0 15px;} /* Or whatever the position in the sprite */