jQuery + qTip2 - Выбрать текущий элемент наведения - PullRequest
Новая
       22

jQuery + qTip2 - Выбрать текущий элемент наведения

0 голосов
/ 17 ноября 2011

Я использую 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') } 
            }
        }
    }));

Однако, так как я выбираю с помощью класса, я получаю только идентификатор первого tr, и, независимо от того, какая у меня указатель мыши на какой строке, я все равно получаю некоторый контент всплывающей подсказки в качестве первой строки. Я пытался использовать $ (this) для выбора идентификатора, но у меня ничего не вышло.

Мне нужен селектор, который я могу выбрать текущий элемент наведения ...

Надеюсь, что вы можете получить помощь здесь ... приветствуется любая обратная связь ...

Спасибо ....

1 Ответ

1 голос
/ 17 ноября 2011

Я попытался получить всплывающее окно при наведении, вот мой код, который вы должны предоставить всплывающую подсказку для всех различных тд 

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

надеюсь, это поможет.

...