神秘的填充增加答案

【问题标题】：Mysterious padding increase神秘的填充增加
【发布时间】：2013-12-26 00:01:31
【问题描述】：

我正在学习和学习，目前正在创建一个验证课程。我有一个小错误，我想问你们，你们怎么看。

Javascript 的工具提示部分

this.toolTip = function(){
var selector = $("#regForm #"+this.idName);
$(selector).focus(function(){
    tooltip = "<div class='tooltip'>"+tooltip+"</div>";
    $(selector).after(tooltip);
}); // focus

$(selector).blur(function(){
    $('.tooltip:parent').remove();
}); // blur
};

这是我写的工具提示功能，基本上我期望它做的是在那个 div 中显示工具提示，然后不仅删除文本，还删除 div。我认为它工作得很好，但是 css 没有这么说。

CSS 的工具提示部分

.tooltip {
    display: inline-block;
    float: none;
    background: #333;
    color: #f9f9f9;
    font-size: 10px;
    padding: 5px;
}

我在CSS 的体验还很差，但我正在开发并且正在尝试。

当我再次关注输入时，填充增加，当我再次单击时，填充再次增加。你们能帮我检查一下代码吗？ http://purpost.me/o/form

（作为设计，我试图复制醉酒的工具提示）

这是错误的图片：

提前致谢！ :)

更新：

更新 jsFiddle：http://jsfiddle.net/ThePianist/hExkP/3/

当我将 CSS .tooltip 的填充更改为零时，填充不会增加，但 div 显然看起来很糟糕。当我尝试<div class="tooltip"><span>'+tooltip+'</span></div> 并为 span 赋予 padding 属性时，它再次开始增长焦点..：/

【问题讨论】：

标签： javascript css padding

【解决方案1】：

发生的情况是，在表单输入内部单击时，有一些脚本在<div class="tooltip"><div> 下方附加了更多空 div。因此，当您单击退出并重新单击时，它会注册另一个单击实例并再次附加，从而使工具提示变大。因此，append/after 部分会出现 javascript 错误。如果您在 jsFiddle 中弹出代码，我可以为您正确查看解决方案:)

编辑：

从代码看，是section：

$(selector).focus(function(){
    tooltip = "<div class='tooltip'>"+tooltip+"</div>";
    $(selector).after(tooltip);
}); // focus

这似乎引起了问题。理想情况下，它应该检查 after 添加的代码是否已经存在，如果存在，则不要再次运行 after 函数

【讨论】：

给你！：）谢谢！ jsfiddle.net/ThePianist/hExkP/2 -- 对不起，我之前没用过 JSFiddle，所以我现在把我的代码放进去。
别担心，我会快速浏览一下
你把css放在HTML部分
已编辑！有新链接，不好意思。 :) jsfiddle.net/ThePianist/hExkP/2
只是想知道，你为什么不在 jQuery 中这样做？ :P

【解决方案2】：

找到了解决方案！我的一个朋友提醒我注意这条线：

JS 之前

tooltip = '<div class="tooltip '+selector.attr('id')+'T">'+tooltip+'</div>';

我也将类属性称为tooltip，现在我用这一行覆盖了它。

JS 后

$(selector).focus(function(){
var tooltipHTML = '<div class="tooltip '+selector.attr('id')+'T">'+tooltip+'</div>';
selector.after(tooltipHTML);
}); // focus

“问题是您将变量tooltip 用于多种事情。之前的代码定义了一个名为tooltip的变量，其中包含html，它用于文本 +tooltip+ 是 JavaScript 的一部分，你不想像这样全局声明变量。”

【讨论】：