Javascript 单击表格单元格或单击图像本身时翻转图像

如果单击单元格或单击图像本身，我尝试将箭头翻转180度。。这是我的代码：注意：正在翻转的图像是第一行中ID为image1的图像。我将翻转所有的图像一旦我得到第一个工作

<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>

我正在使用插件

有什么建议吗

---

只是重申一下：如果单击图像，或者单击图像所在的单元格，图像应该进行180度翻转。

您需要添加。在“th”内旋转。单击并防止图像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})
        }
     } 

});    

---

您的代码运行正常。不，您看到了，我希望在单击表格单元格内的图像时，图像能够旋转。只是重申一下：当他们单击图像时，或者如果他们单击图像所在的单元格时，图像应该旋转@当你点击图片时，ManishIt正在旋转当你点击图片，或者它在@Manish中的单元格时，你需要添加$（“#image1”）。在点击时旋转谢谢！问题是，我试图在其他列中实现这一点，但当我将其添加到其他列（更改值，行的id选择器）时，它不起作用。。。你能用这个例子，让它在两列上运行，这样我就可以看到你是如何做到的了吗？谢谢你的帮助@AbrahamUribe

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

});