登録フォームを作成しています。#onimg och #offimg は、img を含む 2 つの div です。使用可能なユーザー名を入力すると #offimg が表示され、既に使用されているユーザー名を選択すると #onimg vill が表示されます。
登録欄に何も書かない場合(文字を削除する場合など)、画像を非表示にしたいです。しかし、彼らは=(.
ここにHTMLがあります
<ul>
<li>Username:</li>
<li>Password:</li>
</ul>
<ul>
<li><input type="text" id="user" name="user" value="" /></li>
<li><input type="text" id="pass" name="pass" value="" /></li>
<li><input type="checkbox" name="show" value="password">Show password</li>
</ul>
<div id="onimg"></div>
<div id="offimg"></div>
</fieldset>
<button type="button" id="reg" value="" >Register</button>
いくつかのCSS
#onimg {
z-index:1000;
position:absolute;
left:300px;
top:23px;
background-image:url('notavailable.png');
width:20px;
height:20px;
}
#offimg {
z-index:1000;
position:absolute;
left:300px;
top:23px;
background-image:url('available.png');
width:20px;
height:20px;
}
そしてここにjqueryがあります
$('#user').focusout(function(){
var users = $('#user').val();
$.getJSON( "available.php" , //The URL to perform the lookup
{name: users }, //The data you send
function (result){ //The function to fire upon return
if (!result) { //result is JSON formatted
$('#onimg').fadeIn('fast');
} else {
$('#offimg').fadeIn('fast');
}
});
});
$(function() {
$('#user').blur(function() {
if($(this).val() == '') {
$("#onimge").hide();
$("#onimge").hide();
}
});
});