不为空的自定义数据属性上的 jQuery 选择器

Posted 2023-03-05

【中文标题】不为空的自定义数据属性上的 jQuery 选择器

【英文标题】：jQuery selectors on custom data attribute that are not empty

【发布时间】：2014-04-06 08:01:04

【问题描述】：

我想为每个具有data-custom-tooltipset 的元素创建一个简单的 jQuery 自定义工具提示插件。所以，类似：

<a href= . . . " data-custom-tooltip="This is my tooltip Text">Hhahaha</a>

或

<button data-custom-tooltip="This is my tooltip for the button Tex">Haha Button :) </button >

因此，仅当data-custom-tooltip 为NOT 为空时，才会触发显示工具提示的功能。

足够接近这个：jQuery selectors on custom data attributes using html5

【问题讨论】：

试试这个链接...***.com/questions/4146502/…

问题是：显示工具提示的功能是什么，所以只有在 data-custom-tooltip 不为空时才会触发它？？

【参考方案1】：

试试

.filter()

var tooltip_el = $('[data-custom-tooltip]').filter(function () 
    return $.trim($(this).data('custom-tooltip')) != '';
);

【参考方案2】：

这样使用

$("[data-custom-tooltip]:not([data-custom-tooltip='']").click(function()alert("clicked"););

fiddle

【讨论】：

这正是我想要的。谢谢

@JanvierDesigns 很高兴为您提供帮助

由于某种原因，将其与live() 一起使用似乎不起作用，但与on() 一起使用却可以。

live 自 1.7 以来已被弃用，并在 1.9 中被删除！您使用的是什么旧版本的 jQuery。

【参考方案3】：

您可以使用:not() selector 并删除空的

$('[data-custom-tooltip]:not([data-custom-tooltip=""])')

或

$('[data-custom-tooltip]').not('[data-custom-tooltip=""]')

---

或基于@VisioN said in the comments 和Not Equal Selector

var xxx = $('[data-custom-tooltip][data-custom-tooltip!=""]');

【讨论】：

$('[data-custom-tooltip!=""]') 似乎更合乎逻辑...？

@VisioN 它也会选择没有 data-custom-tooltip 属性的元素。

@VisioN 是的，稍作修改。