Question

我正在使用this jQuery表单验证插件。它显示了一个很小的浮动div中的字段错误。

当显示错误div然后它对应的元素移出它的原始位置时出现问题。例如，如果在输入框I.show（）上面是先前隐藏的元素，它将向下推送输入，但该输入的错误提示将保持不变。

如何使浮动div粘贴/跟随它的相应元素？

此插件的代码为here，示例为here。

Answer 1

该插件使用绝对定位来显示错误消息。

如果要添加其他DOM元素以相对于文档移动输入字段位置，则需要在修改DOM运行的脚本之后手动重新定位所有验证＆lt; div＆gt;。

您可以尝试使用jQuery offset（）方法http://api.jquery.com/offset/来获取输入元素相对于文档的新位置，然后相应地调整验证＆lt; div＆gt;的顶部和左侧属性。< / p>

这是一个.jsFiddle，显示我的意思：http://jsfiddle.net/ysQCf/2/

CSS

.errorMessage
{
    background-color: red; 
    position: absolute;
    left: 180px;
    top: 25px;
}

p
{
    display: none;   
}

HTML

<p id="hidden">if you display this the textbox will move down</p>
<input id="myInput" type="text" />
<div class="errorMessage">stick me to the div</div>
<br />
<input id="show" type="button" value="Show" />

的javascript

$(function () {
    $("#show").click(function () {
        // Save the offset of the error against the input
        var offset = $(".errorMessage").offset();
        offset.left -= $("#myInput").offset().left;
        offset.top -= $("#myInput").offset().top;

        // Call your script to manipulate the DOM
        $("#hidden").show(); 

        // Move the error div to it's new position
        offset.left += $("#myInput").offset().left;
        offset.top += $("#myInput").offset().top;
        $(".errorMessage").offset(offset)
    });
});

jQuery - 使浮动元素坚持另一个元素

1 个答案: