使用jQuery跟踪输入和切换类

时间:2017-10-05 15:00:12

标签: javascript jquery css input

我想要实现的是跟踪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>

5 个答案:

答案 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)

您的代码会在初次运行时检查值。您需要附加活动copypastechangekeypresskeydownkeyupinput。见例:

$('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)

&#13;
&#13;
$("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;
&#13;
&#13;

答案 3 :(得分:0)

这是代码段Herekeyup()函数和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');
        }
    });
}