當單擊表格單元或點擊圖像時翻轉圖像

Question

如果單擊單元格或單擊圖像本身，我試圖翻轉180度箭頭。下面是我的代碼：注意：被翻轉的圖像是第一行中具有圖像ID的圖像。一旦我得到這第一個工作，我將會翻轉所有的圖像。

<thead> 
      <tr> 
       <th style="text-align:left; padding-top: 20px;" width="10%" title="Sort by Symbol">Symbol <img src="/images/sort-arrow.jpg" title="Sort by Symbol" alt="Sort by Symbol" class="sort-right move-left bottom-image" id="image1"/></th> 
       <th style="text-align:left;" width="20%" title="Sort by Company Name">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow.jpg" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left"/></th> 
       <th style="text-align:center;" width="12%" title="Sort by Buy Date"><span class="center-text">Buy</span><br>Date <img title="Sort by Buy Date" src="/images/sort-arrow.jpg" alt="Sort by Buy Date"/></th> 
       <th style="text-align:center;" width="10%" title="Sort by Buy Price"><span class="center-text">Buy</span><br>Price &nbsp;<img title="Sort by Buy Price" src="/images/sort-arrow.jpg" alt="Sort by Buy Price"/></th> 
       <th style="text-align:center;" width="9%" title="Sort by Closed Price"><span class="center-text">Closed</span><br>Price &nbsp;<img title="Sort by Closed Price" src="/images/sort-arrow.jpg" alt="Sort by Closed Price"/></th> 
       <th style="text-align:center;" width="9%" title="Sort by Closed Date"><span class="center-text">Closed</span><br>Date &nbsp;<img title="Sort by Closed Date" src="/images/sort-arrow.jpg" alt="Sort by Closed Date" /></th> 
       <th style="text-align:center;" width="10%" title="Sort by Current Return"><span class="center-text">Total</span><br>Return &nbsp;<img title="Sort by Current Return" src="/images/sort-arrow.jpg" alt="Sort by Current Return"/></th> 
     </thead> 

和JavaScript：

$(function(event){ 
    $("table .title a").tooltip({ bodyHandler: function(event) { return $($(this).attr("href")).html(); }, showURL: false, track: true, delay: 0 }); 
}); 

var value = 0 
$("#image1").rotate({ 
    bind: 
    { 
     click: function(){ 
      value +=180; 
      $(this).rotate({ animateTo:value}) 
     } 
    } 

}); 

我現在用的是jQuery Rotate插件

任何建議？

只是爲了重申：如果圖像被點擊或者圖像所在的CELL被點擊，圖像應該做180度翻轉。

Answer 1

你需要添加.rotate的「TH」。點擊preventPropagation內的圖像1。點擊這樣

var value = 0 
$("th:first").click(function(){//you can add some class or id the first th or select only the first 
    value +=180; 
    $("#image1").rotate({ animateTo:value});//or $(this).find("img") 
}); 
$("#image1").rotate({ 
    bind: 
    { 
     click: function(e){ 
      e.stopPropagation();//or the image will rotate 360 
      value +=180; 
      $(this).rotate({ animateTo:value}) 
     } 
    } 

});  

http://jsfiddle.net/9FMks/2/