![](/img/trans.png)
[英]Accordian menu (when clicked) affects position of an image in the next table cell
[英]Flip an image when a table cell is clicked, or the image itself is clicked
如果單擊單元格或單擊圖像本身,我試圖將箭頭翻轉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 <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 <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 <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 <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度翻轉。
您需要在“ th” .click內添加.rotate並在image1 .click上阻止Propagation,就像這樣
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})
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.