Question

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

Answer 1

您可以使用事件来执行此操作。对于输入，jQuery具有input事件，每次输入值发生更改时都会触发该事件。

$(".input").on("input", function () {
    if ($(this).val().length === 0)
        $(this).closest('.card').removeClass("colored");
    else
        $(this).closest('.card').addClass("colored");
});

Answer 2

您的代码会在初次运行时检查值。您需要附加活动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>

Answer 3

＆＃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;

Answer 4

这是代码段Here。 keyup()函数和if检查完成所有操作。

Answer 5

谢谢大家的答案，这是在尝试所有解决方案后对我有用的。希望它可以帮助别人。

function checkInputs() {
    $('.input').each(function(){
        if($(this).val() === ""){
           $(this).parent().parent('.unit-card').removeClass('filled'); 
        } else {
           $(this).parent().parent('.unit-card').addClass('filled');
        }
    });
}

使用jQuery跟踪输入和切换类

5 个答案: