我有两个输入字段和一个提交按钮(内联显示)。填写输入字段后,我试图将一个类添加到下一个兄弟。因此,如果填写了名字输入字段,则向电子邮件输入字段添加一个类,如果填写了电子邮件输入字段,则向下一个输入字段添加一个类,依此类推...
到目前为止,这是我的代码:
$('.form-display #mce-FNAME').blur(function() {
if($.trim(this.value).length) {
$('#mce-EMAIL').toggleClass('animated pulse');
}else if(...){ }...
});
我的 HTML 看起来像这样:
<div class="form-display">
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
最佳答案
将除提交按钮之外的所有输入抓取到一个集合中。
在输入时,根据当前输入是否有值切换下一个输入的类:
var inputs = $('.form-display input').not(':submit');
inputs.on('input', function() {
$(inputs[inputs.index(this) + 1]).toggleClass('animated pulse', this.value > '');
});
片段:
var inputs = $('.form-display input').not(':submit'); //all inputs except submit button
inputs.on('input', function() {
$(inputs[inputs.index(this) + 1]).toggleClass('animated pulse', this.value > '');
});
.animated.pulse {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-display">
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-CITY">City </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-STATE">State </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-ZIP">Zip </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
关于javascript - 检查输入字段的值并添加一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37863220/