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

发布于 2024-08-07 05:04:25 字数 844 浏览 6 评论 0原文

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

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

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

});

因为这也没有产生价值!

I'm creating a little dynamic tooltip function.

Basically if I have a link like so:

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

Using qTip, I attempt to lookup a tooltip table in mysql and retrieve the tip based on the data in the data attribute.

So:

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

Problem is, it doesn't work. $(this).attr('data') doesn't seem to pull the value inside the attribute.

If I manually change the function so it looks like the following it works no problem.

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

});

What am I missing when I'm trying to pull the data from the data attribute? Should I be doing something like:

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

});

As that isn't yielding the value either!

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

第几種人 2024-08-14 05:04:25

您的代码无法运行,因为 this 关键字代表正在执行的函数的上下文,并且您在对象文字中使用它。

例如,如果您在 $(document).ready 事件中执行代码片段,则 this 关键字将代表文档元素。

您可以迭代您的选择器并单独初始化每个元素工具提示:

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

另请注意,data 属性不标准,您的页面将无法通过 W3C 验证器

Your code doesn't works because the this keyword represents the context of the function that is being executed, and you are using it inside an object literal.

For example, if you execute your snippet in the $(document).ready event, the this keyword will represent the document element.

You could iterate over your selector and initialize each element tooltip individually:

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

Also note that the data attribute is not standard, your page will not pass the W3C Validator.

吃兔兔 2024-08-14 05:04:25

这个例子对我有用:

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

This example works for me:

<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>
惟欲睡 2024-08-14 05:04:25

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

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

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

You should try accessing the 0th element of data. Like this:

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

EDIT: oh ok, i see, this should work then as an alternative.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文