修复了将CSS应用于title属性的脚本的错误
Bug fix for a script that applies CSS to the title attribute
下面的脚本将CSS类应用于html title属性。脚本出现的原始页面如下:如何更改锚点标记内的Title属性的样式?
效果很好,但有一个小错误。如果标题属性为空(<input type="text" title="">
),它仍然会在屏幕上显示一个空的弹出框。
有人能帮我修一下吗?类似"如果标题属性没有值,不要应用css,不要显示弹出框。谢谢!
下面的脚本:
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
这种方式:
$(document).on("mouseenter", "*[title]:not([title=''])" ...
一种方法是在没有标题的情况下立即返回:
$(document).on("mouseenter", "*[title]", function (e) {
if (!$(this).attr('title')) return;
// rest of code
});
@不过,c-smile的答案更为明确。
相关文章:
- 未捕获的类型错误:无法设置属性'innerHTML'如果为null,则将脚本移动到正文不会;不起作用
- 从脚本标记访问手柄属性
- 如何使用java脚本或jQuery基于相同的特定css属性对元素进行分组
- Google 表格脚本 - “无法读取未定义的属性”(如果不是)
- 获取 无法读取未定义的引导轮播脚本的属性“偏移宽度”
- Java 脚本 设置日期的最小值和最大值属性
- 是否有脚本/代码可以一次将链接属性添加到多个链接
- 获取脚本中CSS颜色属性的实际值
- 从Input Javascript在脚本中添加属性
- 脚本标记中的全局变量使用's源属性
- Symfony Twig+Haml标记属性检查和属性脚本
- 脚本点击Css显示属性更改不正常运行Asp.net
- 如何像java脚本中给定的对象一样,将对象的属性保持在相同的顺序
- HTML<脚本>Magento中的async属性
- 从另一个Javascript脚本(Canvas3D)更新QML属性
- java脚本错误对象没有'不支持此属性或方法
- 使用script元素上的html data-*属性来配置引用的脚本文件
- javascript<脚本异步属性>
- 使用jQuery获取链接的属性,并将其作为表单发布到另一个脚本文件
- 用于生成具有随机颜色的 CSS 属性的脚本