为什么我的 jquery 选择器在这里不起作用？答案

【问题标题】：Why doesn't my jquery selector work here?为什么我的 jquery 选择器在这里不起作用？
【发布时间】：2009-10-12 12:16:50
【问题描述】：

我正在创建一个小的动态工具提示功能。

基本上如果我有这样的链接：

<a href="#" data="xyz">?</a>

使用 qTip，我尝试在 mysql 中查找工具提示表，并根据数据属性中的数据检索提示。

所以：

$('a[data]').qtip({ 
    content: {
       url: '/tooltip.php',
       data: { tipKey: $(this).attr('data') },
       method: 'post'
}
});

问题是，它不起作用。 $(this).attr('data') 似乎没有提取属性内的值。

如果我手动更改功能，使其看起来像以下它没有问题。

    $('a[data]').qtip({ 
    content: {
        url: '/tooltip.php',
        data: { tipKey: 'xyz' },
        method: 'post'
    }

});

当我试图从数据属性中提取数据时，我错过了什么？我应该这样做：

    $('a[data]').qtip({ 
    content: {
        url: '/tooltip.php',
        data: { tipKey: ''+$(this).attr('data')+'' },
        method: 'post'
    }

});

因为这也没有产生价值！

【问题讨论】：

标签： jquery qtip

【解决方案1】：

您的代码不起作用，因为 this 关键字表示正在执行的函数的上下文，并且您在对象文字中使用它。

例如，如果您在$(document).ready 事件中执行sn-p，则this 关键字将代表文档元素。

您可以在选择器上iterate 并单独初始化每个元素工具提示：

$('a[data]').each(function () {
  var $link = $(this);
  $link.qtip({ 
      content: {
        url: '/tooltip.php',
        data: { tipKey: $link.attr('data') },
        method: 'post'
      }
  });
});

还要注意data属性不是标准的，你的页面不会通过W3C Validator。

【讨论】：

感谢 heaps CMS...我已经从“数据”转移到“标题”，您的解决方案很有效。

【解决方案2】：

这个例子对我有用：

<html>
<head>
<title>Text</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  alert($("a[data]").text());
});
</script>
</head>
<body>
<a href="#" data="123">abc</a>
</body>
</html>

【讨论】：

他是在寻找属性，而不是链接的文本，对吧？
正确的 Alberto... attr 不是之间的东西

【解决方案3】：

您应该尝试访问数据的第 0 个元素。像这样：

data: { tipKey: $("a[data]")[0].data},

编辑：哦，好吧，我明白了，这应该可以作为替代方案。

【讨论】：