JQUERY - 在TABLE鼠標上顯示隱藏的div超過

對JQuery知之甚少。我一直試圖尋找解決這個問題一天左右，我已經搜索了這個網站的答案，但不能得到最終解決方案。JQUERY - 在TABLE鼠標上顯示隱藏的div超過

基本上我工作的是一個非常有限的ECOM網站，它提供了有限的開發功能，操縱和更改元素的唯一方法是使用客戶端語言。

基本上我有一個非常非常骯髒的HTML表格在飛行中生成，每個產品都有一個表類和唯一的TR ID。產品展示在他們自己的桌子上。

我想顯示一個隱藏的div，當用戶鼠標懸停在桌子上時。我曾嘗試以下內容：

$(document).ready(function() { 
    $('table.newspaper-d tr[id^=product_]').hover(function() { 
     $(this).find("div.tools").show(); 
    }, function() { 
     $(this).find("div.tools").hide(); 
    }); 
});

它在某種程度上起作用，但它只在懸停在div上時才起作用。

標記的HTML示例的是表與類和每個TR具有product_的唯一行 - （ID被contactenated）即product_134是一個，product_324，product_323等等等等

<tbody> 
    <tr><td></td></tr> 
    <tr> 
     <td align="center"> 
      <table class="newspaper-d" border="0" style="width:250px; float:left;"> 
       <tbody> 
        <tr class="product_13633"> 
         <td> 

          KKKK 

          <div class="tools" style="display: none;"> 
           <div class="add-to-basket-product"> 
            <div class="inner-add-to-basket-product"> 
             <a href="javascript:addToCart(13633);"> 

              ADD TO CART 

             </a> 
            </div> 
           </div> 
          </div> 
         </td> 
        </tr> 
        <tr> 
         <td align="center"> 
          <table cellspacing="3" cellpadding="3"> 
           <tbody> 
            <tr> 
             <td width="200"> 
              <div class="product-category-pic" align="center"> 
               <a href="/Descombes-Brouilly-VV-2011-818221/"> 
                <img class="image-thumb" border="0" src="/product_images/16/3883/thumb-descombes-brouilly-vv-2011.jpg" title="Descombes Brouilly VV 2011" alt="Descombes Brouilly VV 2011"></img> 
               </a> 
              </div> 
             </td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td align="center"> 
          <table cellspacing="0" border="0"> 
           <tbody> 
            <tr> 
             <td height="36" align="center"> 


              PRODUCT PRODUCT PRODUCT 

             </td> 
            </tr> 
           </tbody> 
          </table> 
          <div class="product-category-details"></div> 
          <div class="add-to-basket-product"></div> 
         </td> 
        </tr> 
       </tbody> 
      </table>

由於guys

來源

2014-10-04 dale2014

份額HTML例子 – 2014-10-04 06:00:23

我看到一個問題，您的選擇：'TR [ID^= product_]'應該是'TR [ID^= 「product _」]' - 你需要引用屬性文本。 – hargobind 2014-10-04 06:02:15

你的代碼工作正常，你錯過了別的東西http://jsfiddle.net/victor_007/wvcw4s5c/ – 2014-10-04 06:09:27

如果我明白你的最後的評論，我會做這樣的事情：

$(document).ready(function() { 
    $('table.newspaper-d').hover(function() { 
     $(this).find("div.tools").show(); 
    }, function() { 
     $(this).find("div.tools").hide(); 
    }); 
});

懸停全表，切換div的可見性。

您可以檢查它取消此琴：http://jsfiddle.net/benjasHu/kLko76sa/

來源

2014-10-04 09:37:33 benjasHu

你的代碼實際上工作得很好。屬性選擇器可以是tr[id^=product_]或tr[id^="product_"]，它們的操作方式沒有區別。我假設你的標記出現了一些問題，使得選擇工作意外，如果你會發布你的html樣本，我會很樂意調整我的小提琴以反映你需要的東西。

撥弄工作的例子：http://jsfiddle.net/autoboxer/jLnj4gas/2/

乾杯， autoboxer

編輯：我根據您發佈的標記更新了我的小提琴。

來源

2014-10-04 06:17:27 autoboxer

感謝您的迅速回復人。優秀。 HTML如下。再次，我沒有訪問此更改（它與嵌套表的混亂）只是爲了跟進，代碼工程如果我將鼠標懸停在div的位置，我希望它顯示的div時懸停在整個table.Its基本上是網格格式的多個產品的產品頁面，因此是唯一的ROW ID – dale2014 2014-10-04 07:28:27

你必須到位「ID」選擇的使用「CLASS」選擇，因爲TR中含有類，而不是ID。

試試下面的代碼：

$(document).ready(function() { 
$('table.newspaper-d tr[class^="product_"]').hover(function() { 
    $(this).find("div.tools").show(); 
}, function() { 
    $(this).find("div.tools").hide(); 
}); 
});

DEMO FIDDLE

來源

2014-10-04 09:59:46 Jinandra

JQUERY - 在TABLE鼠標上顯示隱藏的div超過

回答

相關問題