0

セルがクリックされた場合、または画像自体がクリックされた場合、矢印を 180 度反転しようとしています。これが私のコードです: 注: 反転される画像は、image1 の 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プラグインを使用しています

推奨事項はありますか？

再確認するために: 画像がクリックされた場合、または画像が配置されているセルがクリックされた場合、画像は 180 度反転する必要があります。

4

1 に答える 1

1

「th」内に.rotateを追加する必要があります.clickとpreventPropagation on image1 .click 

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/

于 2013-10-31T19:54:58.243 に答える