Question

我想这很简单，也有某种范围问题 - 但我被卡住了。在下面的代码中，我想看到一个警告“foo！”还是“吧！”当我将鼠标移到div上时。相反，我看到了空的内容。如何在我有警报的地方（？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>

Answer 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

Answer 2

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

TRY

alert( $(this).data('title.poshytip' ))

Answer 3

我确实相信你错过了正韵的简单性。当您说警报时，您的意思是文字javascript警报或正面消息。因为如果你想要一个正片消息，你所要做的就是添加适当的类，即.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中。

如何在JQuery中寻址匹配的选择器

3 个答案: