javascript - 附加了 jQuery 的内联元素换行

Question

我试图构建一个响应式表单，然后我会在我的一些网站中使用它，但遇到了一些细节问题。我想用javascript启用输入验证，所以当用户在输入文本框中插入无效输入时，我希望框弹出错误消息，输入右侧有一个IMG标签，下面有一个DIV标签输入。我通过将这些元素附加 (jQuery) 到输入的父元素(一个标签)来实现这一点。

这是基本输入:

<label for="errore"><span class="title">Errato</span><input type="text" name="errore" id="errore" size="30" maxlength="30" value="Cliccami e poi esci"/></label>

这是我附加元素的方式。

$(this).parent().append("<img class='error' src='css/img/cross.png' alt='error' /><span class='error'>Input non valido.</span>");

因此，如果用户随后输入正确的输入并退出 INPUT 标记，则错误消息应该消失。我通过删除这样的元素来做到这一点:

$(this).parent().find("*.error").remove();

而且效果很好。但是，如果我遵循以下顺序:错误输入、退出元素、错误消息、正确输入、退出元素、错误消息消失、错误输入、退出元素、错误消息重新出现但图像在新行上!那只是在 chrome 中。不知道为什么。它似乎取决于 IMG 元素旁边的元素，如果它是一个内联元素，它在第一次和第二次都工作正常，如果它是一个 block 元素，它在第一次工作正常而在第二次工作错误。

所以，我的问题是图像元素，我不希望它换行，但我希望它旁边的元素是 block 元素。

我知道这可能不是很清楚，所以我会包括我的例子。

form example (JSFiddle)

在示例中，输入并退出标题为“Errato”的输入即可添加错误消息，然后输入并退出以将其删除。因此，如果您这样做 3 次，您应该会收到错误的错误消息。

看起来图像将显示: block 或其他东西，因为效果是这样，但如果您在浏览器的控制台上检查 css，它实际上是显示:内联。

如果您需要更多详细信息，请随时询问。

Answer 1

看看这个方法来解决你的问题。我认为您只将输入字段放在标签元素内，以便更好地添加和删除信息文本。所以这也可能是一个解决方案。

我所做的改变:在 CSS 中:删除了包裹标签文本的 span 元素

label.title{ font-weight:bold; display:block; margin-top:5px; }

在 Javascript 中:直接在输入字段后添加两个信息元素，并删除此输入字段的下两个具有类“.error”的兄弟元素。还将包含错误消息的跨度更改为 div 元素。

I also forked your fiddle