简单的方法来显示图像旁边的文本框？

Question

我想使用ajax来验证表单...如果该表单通过了阈值，我已经知道它是显示交叉还是勾号。这是通过显示或隐藏div标签完成的，是否有更简单的方法，我不必为每个交叉&打勾都有div标签，因为这将使用大约20个div标签。

感谢

Answer 1

你可以使用CSS :before属性来做到这一点：

.tick:before { 
    content:url(tick.gif); 
} 

.cross:before { 
    content:url(cross.gif); 
} 

（你可能不得不调整的CSS一点得到图像中的正确位置显示）

然后在您的JavaScript中，只需将类tick或cross添加到您要在旁边显示图像的每个文本框。

Answer 2

由于您的验证取决于JavaScript，因此您可以先将div从HTML中排除，并在验证字段后插入它们。比方说，你的来源是这样的：

<p><input id="email" name="email" type="text" value="" /></p> 

你的脚本可能是这样的：

var emailField = document.getElementById('email'); 
if(isValid(emailField)){ 
var tick = document.createElement('DIV'); 
tick.className = 'tick'; 
emailField.parentNode.appendChild(tick); 
}else{ 
var cross= document.createElement('DIV'); 
cross.className = 'cross'; 
emailField.parentNode.appendChild(cross); 
} 

你的类“.tick”和” .cross'添加到你的CSS和应用背景图片。当然，如果元素已经被之前的验证插入，您需要进行一些检查。这只是一个简单的例子。

这样你最初不需要额外的div。