在mousedown上更改div图像并在mouseup上还原

Question

我正在尝试更改mousedown上的图像并恢复到mouseup上的初始图像。 图像在mousedown上正在改变，但它不会恢复到mouseup上的初始图像。 mouseup函数中的警报不会显示...出了什么问题？

$(#mydivid).bind('mousedown', function() { 
     document.getElementById(mydivid).style.backgroundImage = "url(Images/new.png)"; 
     alert("mousedown"); 
    }); 



    $(#mydivid).bind('mouseup', function() { 
     document.getElementById(mydivid).style.backgroundImage = "url(Images/initial.png)"; 
alert("mouseup"); 
    }); 

我已经观察到，当我与多于1个事件同一div，第一个事件处理程序和工作而忽略其他...我如何确保所有事件的处理？

Answer 1

你应该摆脱警报。这是造成这个问题的原因。

我注意到的另一件事是'#mydivid'没有封装在引号中。另外，如果你使用的是jquery 1.7+，那么推荐使用'on'而不是'bind'。

从jQuery 1.7开始，.on（）方法是 将事件处理程序附加到文档的首选方法。对于早期版本， .bind（）方法用于将事件处理程序直接附加到 元素。

来源：http://api.jquery.com/bind/

JQuery的也有改变元素的CSS特性的方法。也许你可以考虑改变背景。

http://api.jquery.com/css/

---

但是，就像我说的，删除警报，它应该只是罚款。看到这个例子：

http://jsfiddle.net/fS9Ct/1/