的jQuery + qTip2 - 選擇當前懸停元素

我使用qTip2以顯示錶行提示：的jQuery + qTip2 - 選擇當前懸停元素

@foreach (var item in Model) 
     { 
      <tr id="@(item.ShopListID)"> 
       <td id="[email protected](item.ShopListFoodID)" class="shoptablename">@Html.DisplayFor(modelItem => item.Name) 
       </td> 
       <td id="[email protected](item.ShopListFoodID)" class="shoptableamount">@Html.DisplayFor(modelItem => item.Amount) 
       </td> 
      </tr> 

     }

我想爲每個「金額」欄的提示，所以我開始喜歡這個工具提示：

// Use ajax to add tooltip for food with stock amount 
    $('.shoptableamount').qtip($.extend({}, myStyle, { 
     content: { 
      text: 'Loading...', // The text to use whilst the AJAX request is loading 
      ajax: { 
       url: '/Shop/GetFoodAmount', 
       type: 'GET', 
       data: { id: $('.shoptableamount').attr('id') } 
      } 
     } 
    }));

然而，由於我選擇使用類，我只得到了第一TR的ID，也不管我有我的鼠標在哪一行，我仍然得到一些提示內容中的第一行。我試圖用$（this）來選擇id，但我沒有工作。

我需要一個選擇，我可以選擇當前懸停元素...

希望能在這裏得到一些幫助...任何反饋讚賞...

感謝....

來源

2011-11-17 shennyL

$（this）返回什麼？ – mprabhat

嗨，$（this）.attr（'id'）返回1,2,3 ...爲第一，第二和第三行.. – shennyL

hmm然後嘗試使用$（this，'.shoptableamount'）來獲取工具提示 – mprabhat

我試圖讓tooptip上懸停，這裏是我的代碼，你必須爲所有不同的TD的

<html> 
<head> 
<title>Test Qtip on Hover</title> 
<script src="jquery.1.6.1.min.js"></script> 
<script src="jquery.qtip-1.0.0-rc3.min.js"></script> 

    <style> 
    .className { 
     color: red; 
    } 

    .classValue { 
     color: green; 
    } 
    </style> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('.classValue').each(function() { 
       $(this).qtip({ 
        content : $(this).text() + "_" + $(this).attr('id') 
       }); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
     <table border="1"> 
      <thead> 
       <th>Name</th> 

       <th>Value</th> 

      </thead> 
      <tbody> 
       <tr> 
        <td id="name1" class="className">test1</td> 
        <td id="value1" class="classValue">test1Val</td> 
       </tr> 
       <tr> 
        <td id="name2" class="className">test2</td> 
        <td id="value2" class="classValue">test2Val</td> 
       </tr> 
       <tr> 
        <td id="name3" class="className">test3</td> 
        <td id="value3" class="classValue">test3Val</td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html>

希望這有助於提供工具提示。

來源

2011-11-17 14:52:24 mprabhat

感謝帕特里夏，我沒有檢查格式:) – mprabhat

嗨，非常感謝。我從qTip支持中獲得類似的解決方案，使用每個td的.each太循環:)謝謝 – shennyL

的jQuery + qTip2 - 選擇當前懸停元素

回答

相關問題