jquery - 帮助attr,mouseenter和mouseout无法正常运行

原文 标签 jquery attr mouseout mouseenter

Help with attr, mouseenter, and mouseout not functioning correctly

I can't get the attr function to change the class and keep it until the next click. It also won't use the new mouseenter and mouseout functions. Any ideas what I am doing wrong?

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');
});

Here is a link to a sample of the page. MMA Slideshow controls sample

Answer

When you say:

It also won't use the new mouseenter and mouseout functions

I am guessing that it is because when your code runs, your objects don't have the class yet so they aren't bound to the eventhandlers. You could use the live function to bind your event correctly.

$('.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');
});

翻译

我无法获得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
最佳答案
当你说:


  它也不会使用新的mouseenter
  和mouseout功能


我猜这是因为在您的代码运行时,您的对象还没有该类,因此它们未绑定到事件处理程序。您可以使用live函数正确绑定事件。

$('.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');
});
相关推荐

javascript - 单击链接时如何在特定的div中添加文本

javascript - 如何在jQuery中延迟ajax调用?

javascript - 使用jQuery从两个值中获取两个值

jquery - 使用jQuery更改li的背景颜色

jquery - 使用jQuery获取边框样式

javascript - jQuery交互式地图库? [关闭]

jquery - 滚动jQuery问题。如何自动滚动onclick到div

javascript - 如果元素在jQuery中具有某个类,如何忽略click()?

php - 使用AJAX发送阵列的最佳策略

javascript - jQuery回调特异性