1

table rowマウスを上に置いたときに、それぞれに配置されたdivを表示したかったのです。ホバーされたdiv.toolsのはtable row、ホバーアウト時に表示および非表示になります。

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

<table width="99%" cellspacing="0" cellpadding="2" class="main-box">
 <tbody><tr class="dataTableHeadingRow">
 <td class="dataTableHeadingContent">Categories / Products</td>
 <td class="dataTableHeadingContent" align="right">Action&nbsp;</td>
 </tr>

 <tr id="product_37">
   <td class="dataTableContent">
    <a href="#">Cotton Piqué Tennis Shirt</a>
    <div class="tools" style="display:none;">Tools Here</div>
   </td>
   <td class="dataTableContent" align="right">
    <img src="#/images/icon_arrow_right.gif" border="0" alt="">&nbsp;
   </td>
 </tr>

 <tr id="product_39">
   <td class="dataTableContent">
    <a href="#">Leather Plus Cotton Cut-Out Sling Back Sandal</a>
    <div class="tools" style="display:none;">Tools Here</div>
   </td>
   <td class="dataTableContent" align="right">
    <a href="#"><img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>&nbsp;
   </td>
  </tr>

  <tr id="product_38">
    <td class="dataTableContent">
     <a href="#">Poly-Cotton 3/4 Sleeve Raglan Shirt</a>
    <div class="tools" style="display:none;">Tools Here</div>
    </td>
    <td class="dataTableContent" align="right">
     <a href="#">
     <img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>&nbsp;
    </td>
  </tr>

  </tbody>
</table>

このjQuery関数を試しましたが、機能しません。

jQuery(function() {
 jQuery('*[id^=product_]').hover(function(){
   jQuery(this).children("div.tools").show();
    },function(){
   jQuery(this).children("div.tools").hide();
    });
 });
});
4

1 に答える 1

3

.find()の代わりに使用してください.children()。

使用している.children()メソッドは、直接の子のみを検索します。これは、tr要素の場合はtdsになります。

この.find()メソッドはすべての子孫の間で検索されるため、tds内を検索してdivを検索します。

また、コードがまったく機能しなくなる構文エラーがあります});。最後に余分なクローズがあり、削除する必要があります。

また、を使用してすべての要素を選択するよりも、*そのテーブル内のtr要素のみを選択する方が効率的な場合があります。

jQuery(function() {
    jQuery('table.main-box tr[id^=product_]').hover(function() {
        jQuery(this).find("div.tools").show();
    }, function() {
        jQuery(this).find("div.tools").hide();
    });
});​
于 2012-08-05T02:13:23.943 に答える