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/