jQuery - 点击更改事件，然后在第二次点击时恢复原始事件？

Question

HI人

我想允许在一堆图像元素的一种“切换”状态，因此他们有

• 翻车，
• 一个onclick图像变化和
• 列表项目 单击时发生ID更改。

我可以做的事情很多，但是当他们第二次点击时（即返回到原始图像，重新设置翻转并恢复原始ID时），我无法恢复它们。

这里是我的代码：

$("#Table1 img").each(function() { // loops round every image in Table1 
    $(this).hover(function() { // sets hover rules 
     this.src = "images/mine.gif" 
    },function() { // mine.gif for mouseover, available.gif for mouseout 
     this.src = "images/available.gif" 
    }); 
    $(this).click(function() { // sets click rules 
     this.src = "images/mine.gif"; // mine.gif for onclick 
     this.id = "x" + this.id; // adds an 'x' to the ID of clicked images 
     $(this).unbind("mouseover mouseout"); // removes mouseover and mouseout events to keep visual selection 
     $(this).click(function() { 
      this.src = "images/available.gif"; 
      this.id = this.id.substr(2, this.id.length); 
     }); 
    }); 
}); 

我试图在第二$(this).click()嵌入$(this).hover()功能，但没有奏效。

上面的代码完全可以工作，但我无法获得原始的翻转来恢复。

任何帮助将不胜感激。我意识到有更多优雅的方式来完成我已经在jQuery中完成的工作（代表等），但是由于我正在学习，我希望首先以简单明了的方式来完成。

:)

Answer 1

我能够通过类来保持图像的点击的状态来做到这一点。悬停不必被移除，只需在执行任何代码位于悬停函数内之前检查图像的状态即可。我还使用了.toggle（）而不是试图嵌套.click（）监听器。

http://jsfiddle.net/e8CdP/