簡單的方法來顯示圖像旁邊的文本框？

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。