如果有人可以帮我解决这个问题,请。 我需要将标签旁边的图像设置为“星形”,在电子邮件字段有效时更改“检查”图像,并在选择选项时进行相同的操作。 如果未完成电子邮件字段或未选择主题,则带有星标的图像将保持不变。
这是我的html表单 - >
<form id="jform" method="post" action="#" name="jform" enctype="multipart/form-data">
<p>
<label for="email" id="email" class="w_160 block req_e">E-mail:</label>
<input type="text" name="email" id="email" onClick="checkEmail(document.signupform.email.value)" >
</p>
<p>
<label for="subject" name="subject" class="w_160 block req">Subject:<!-- <span>* </span> --> </label>
<select name="subject" class="subject" id="subject">
<option value="0">select subject</option>
<option value="1">subject 1</option>
<option value="2">subject 2</option>
</select>
</p>
</form>
这是CSS - &gt;
.req{
background: url(images/req_star.png) 65px center no-repeat;
display: block;
}
.req_e{
background: url(images/req_star.png) 90px center no-repeat;
display: block;
padding-left: 35px;
}
.correct{
background: url(images/valid.png) 65px center no-repeat;
display: block;
}
.correct_e{
background: url(images/valid.png) 90px center no-repeat;
display: block;
padding-left: 35px;
}
JavaScript - &gt;
$(document).ready(function(){
var jVal = {
'email' : function checkEmail() {
var email = document.getElementById('email');
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
$('mail').removeClass('correct_e');
$('mail').addClass('req_e');
email.focus;
return false;
}
else{
$('mail').removeClass('req_e');
$('mail').addClass('correct_e');
}
}
'subject' : function() {
var ele = $('#subject');
var pos = ele.offset();
sub.css({
top: pos.top-10,
left: pos.left+ele.width()+40
});
if(form.subject.selectedIndex > 0) { // an option has been selected
sub.removeClass('req').addClass('correct');
ele.removeClass('correct').addClass('req');
} else { // no option selected
jVal.errors = true;
sub.removeClass('correct').addClass('req');
ele.removeClass('req').addClass('correct');
}
}
};
// ====================================================== //
$('#email').change(jVal.email);
$('#subject').change(jVal.subject);
});