0


私はテーブルを持っており、テーブルの行には、マウスのホバーで画像を表示し、ホバーアウトで非表示にする行ごとに1つの列があります。

これが私のテーブルコードです。

<table cellpadding="0" cellspacing="0" border="0" class="display dTable">
    <thead>
        <tr>
            <th style="width:5%;"> &nbsp; </th>
            <th style="width:10%;">Estimate#</th>
            <th style="width:20%;">Reference</th>
            <th style="width:30%;">Customer Name</th>
            <th style="width:15%;">Date</th>
            <th style="width:10%;">Amount</th>
            <th style="width:10%;">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="gradeA">
            <td class="context">
                <a href="#" title="" class="smallButton" style="margin:5px;display:none;">
                    <img src="images/icons/dark/cog3.png" alt=""/>
                </a>
            </td>
            <td align="center"><a href="#">EST-1</a></td>
            <td align="center">Invoic 2,3</td>
            <td align="center"><a href="#">Fahamco Distrubutions</a></td>
            <td align="center">02-05-2012</td>
            <td align="center">&yen;89800909</td>
            <td align="center">pending</td>
        </tr>
        <tr class="gradeX">
            <td class="context">
                <a href="#" title="" class="smallButton" style="margin:5px;display:none;">
                    <img src="images/icons/dark/cog3.png" alt="" />
                </a>
            </td>
            <td align="center"><a href="#">EST-1</a></td>
            <td align="center">Invoic 2,3</td>
            <td align="center"><a href="#">Fahamco Distrubutions</a></td>
            <td align="center">02-05-2012</td>
            <td align="center">&yen;89800909</td>
            <td align="center">pending</td>
        </tr>
    </tbody>
</table>

anchorすべての行の最初の列に画像付きのタグがありますが、これは最初は非表示になっています。各要素のマウスホバーで画像を表示したいと思います。

これが私が使ってみたjqueryコードです。

$('.context').hover(
    function() {
        $('.context a').show();
    },
    function() {
        $('.context a').hide();
    }
);

上記のコードはすべてのアンカータグを表示します。必要なのは、対応する要素のみを表示することです。

また、要素でクラスまたはid属性を使用せずにこれを実現する方法はありますか<td>。

4

4 に答える 4

4

これを試して：

http://jsfiddle.net/tuaaD/

$('.context').hover(
    function() {
        $(this).find('a').show();
    },
    function() {
        $(this).find('a').hide();
    }
);

のクラスを使用せずに動作させるには、このhttp://jsfiddle.net/tuaaD/1/tdを参照してください。

于 2012-05-02T12:17:31.090 に答える
2

$(this)現在の要素を取得するために使用しfind、子を取得するためにメソッドを使用します

   $(function(){
      $('.context').hover(
         function() {
             $(this).find("a").show();
         },
         function() {
              $(this).find("a").hide();
         }
      );
    });
    ​

作業サンプル： http： //jsfiddle.net/LKKDZ/2/

于 2012-05-02T12:19:22.940 に答える
1

使用$(this)およびfind()：

$('.context').hover(function() {
        $(this).find('a').show();
    },
    function() {
        $(this).find('a').hide();
    });

を使用$thisすると、ホバーした要素に対してのみ関数を実行し、find()必要な子要素を正確に取得できます。

于 2012-05-02T12:20:13.210 に答える
1

Arvind07の回答を少し変更すると、行にカーソルを合わせることが簡単になり、クラス名は使用されません。

http://jsfiddle.net/vP8g4/

$('tbody tr').hover(
    function() {
        $('a', this).first().show();
    },
    function() {
        $('a', this).first().hide();
    }
);​
于 2012-05-02T12:26:52.330 に答える