3

我想这很简单，而且是某种范围界定问题——但我被困住了。在下面的代码中，我希望看到带有“foo！”的警报。或“酒吧！” 当我将鼠标悬停在 div 上时。相反，我看到了空内容。如何从我有 alert() 的位置处理与选择器匹配的当前元素？TIA。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test Case</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

    <!-- Tooltip classes -->
    <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />

    <!-- jQuery and the Poshy Tip plugin files -->
    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../src/jquery.poshytip.js"></script>

    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $("span[name='entity']").poshytip({
                className: 'tip-yellow',
                content: function(updateCallback) {
                            var title = $(this).attr('title');
                            alert(title);
                            updateCallback(title);
                          },
                showTimeout: 1,
                alignTo: 'target',
                alignX: 'center',
                offsetY: 5,
                allowTipHover: true
            });
        });
        //              
        //]]>
    </script>   
</head>

<body>
    <p><span name="entity" title="foo!">Hover for a tooltip 1</span></p>
    <p><span name="entity" title="bar!">Hover for a tooltip 2</span></p>

</body>
</html>
4

3 回答 3

1

您的选择使用$(this).attr('title')是正确的。但是，由于 poshytip 在内部使用了 title 属性，它似乎是在临时修改 title 属性。您可以通过在此处设置断点来查看此行为：$(this)引用跨度，但标题为空白。

当您在内容回调之外选择跨度时，标题就在那里 - 例如，从调试器使用$("span").attr("title")

由于 poshytip 的目的是为您提供增强的工具提示，因此这可能是意料之中的。事实上，如果你完全删除你的内容功能，你会看到正确的标题/工具提示弹出：

    $(function(){
        $("span[name='entity']").poshytip({
            className: 'tip-yellow',
            showTimeout: 1,
            alignTo: 'target',
            alignX: 'center',
            offsetY: 5,
            allowTipHover: true
        });
    });

指定内容方法对于计算标题很有用（例如，如果您想从内容返回一些其他值，工具提示将显示它）。

另外，updateCallback 主要用于异步更新工具提示：http: //vadikom.com/demos/poshytip/#async-content

于 2012-11-10T19:36:21.667 回答
1

工具提示插件通常会删除标题值，因此浏览器默认显示也不会显示它们。在这个插件的情况下，它将原始数据存储在元素本身的数据中。快速浏览插件源代码显示它被存储为title.poshytip使用 jQuerydata()方法

尝试

alert( $(this).data('title.poshytip' ))
于 2012-11-10T19:40:33.983 回答
0

我相信你错过了 poshytip 的简单性。当您说警报时，您是指文字 javascript 警报还是 poshytip 消息。因为如果你想要一个 poshytip 消息，你所要做的就是添加适当的类，即.tip-darkgray，然后调用它的 `.poshytip' 方法，它应该为你实现所有的处理程序。

例子：

<script type='text/javascript'>
  $(document).ready(function() {
    $("span[name='poshy']").poshytip();
  });
</script>

<span name="poshy" title="So Poshy"></span>

另外，不要忘记将所有 jQuery 包装在 DOM Ready 中。

于 2012-11-10T19:31:15.220 回答