jQuery + qTip2 - 选择当前悬停元素

发布于 2024-12-16 14:50:40 字数 1146 浏览 1 评论 0原文

我正在使用 qTip2 显示表行的工具提示：

   @foreach (var item in Model)
        {
            <tr id="@(item.ShopListID)">
                <td id="name@(item.ShopListFoodID)" class="shoptablename">@Html.DisplayFor(modelItem => item.Name)
                </td>
                <td id="amnt@(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') } 
            }
        }
    }));

但是，由于我选择使用该类，所以我只获得第一个字段的 id tr，无论我将鼠标放在哪一行上，我仍然会得到一些工具提示内容作为第一行。我尝试使用 $(this) 来选择 id，但没有成功。

我需要一个选择器，我可以选择当前的悬停元素...

希望可以在这里得到一些帮助...任何反馈表示赞赏...

谢谢...

原文

I am using qTip2 to display tooltip for the table rows:

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

        }

I want to have the tooltip for each "Amount" field, so I initiate the tooltip like this:

    // 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') } 
            }
        }
    }));

However, since i select using the class, I only get the id of the first tr, and no matter I have my mouse over on which row, I still get the some tooltip content as the first row. I tried to use $(this) to select the id, but I did not work.

I need a selector which I can select the current hover element...

Hope can get some help here... any feedback is appreciated...

Thanks....

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

靖瑶 2024-12-23 14:50:40

我尝试在悬停时获取 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>

希望这会有所帮助。

i tried getting tooptip on hover, here is my code you have to provide tooltip for all the different td's

<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>

hope this helps.

回复收藏 0 原文

~没有更多了~