我想要实现的是跟踪20个输入,如果填充了一个,我想在此输入的父div中添加一个类,如果它在我希望类从父项中删除之后变为空。当我在控制台中运行它时,此代码执行我想要的操作,如何改进它以便它可以跟踪输入并切换类?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="vr"/>
<span id='confirmMessage' ></span>
<input id='vr' name='vr'>
<input type='hidden' id='confirm_vr' name='confirm_vr' value="X"/>
<hr />
<button>Set text value</button>
答案 0 :(得分:0)
您可以使用事件来执行此操作。对于输入,jQuery具有input
事件,每次输入值发生更改时都会触发该事件。
$(".input").on("input", function () {
if ($(this).val().length === 0)
$(this).closest('.card').removeClass("colored");
else
$(this).closest('.card').addClass("colored");
});
答案 1 :(得分:0)
您的代码会在初次运行时检查值。您需要附加活动copy
,paste
,change
,keypress
,keydown
,keyup
和input
。见例:
$('input').on('copy paste keydown keyup keypress change input', function(){
var $input = $(this);
if( $input.val() == '' ){
$input.parent('.form-group').addClass('empty');
} else {
$input.parent('.form-group').removeClass('empty');
}
});
.form-group {
margin-bottom:10px;
}
.form-group.empty > input {
border:2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<input name="name" type="text" placeholder="name"/>
</div>
<div class="form-group">
<input name="email" type="text" placeholder="email"/>
</div>
<div class="form-group">
<input name="address" type="text" placeholder="address"/>
</div>
答案 2 :(得分:0)
$("input[type='text']").on("keyup",function(){
if($(this).val()!="")
{
$(this).parent().addClass("active");
}else{
$(this).parent().removeClass("active");
}
})
&#13;
.active{
background-color:red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" >
</div>
&#13;
答案 3 :(得分:0)
这是代码段Here。 keyup()
函数和if检查完成所有操作。
答案 4 :(得分:0)
谢谢大家的答案,这是在尝试所有解决方案后对我有用的。希望它可以帮助别人。
function checkInputs() {
$('.input').each(function(){
if($(this).val() === ""){
$(this).parent().parent('.unit-card').removeClass('filled');
} else {
$(this).parent().parent('.unit-card').addClass('filled');
}
});
}