跟踪输入和切换类与jQuery

我想要实现的是跟踪20个输入，如果一个填充我想添加一个类到此输入的父div，如果它变成空后我想要类删除本身来自父母。当我在控制台中运行代码时，该代码做了我想要的，我该如何改进它，以便跟踪输入并切换课程？跟踪输入和切换类与jQuery

$('.input').each(function() { 
    var $input = $(this); 
    if ($input.val()) { 
     var $parent = $input.closest('.card'); 
     $parent.addClass('colored') 
    } 
});

来源

2017-10-05 Kotevin5

做了什么帮助？ –

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

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

来源

2017-10-06 09:23:36 Kotevin5

您可以使用一个事件来做到这一点。对于输入，jQuery有每次输入值改变时触发的input事件。

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

来源

2017-10-05 15:03:22 Jerodev

您的代码会在初始运行时检查值。您需要附加事件copy,paste,change, keypress,,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>

来源

2017-10-05 15:05:54

$("input[type='text']").on("keyup",function(){ 
 

 
if($(this).val()!="") 
 
{ 
 
$(this).parent().addClass("active"); 
 
}else{ 
 
$(this).parent().removeClass("active"); 
 
} 
 

 
})

.active{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<input type="text" > 
 
</div>

来源

2017-10-05 15:06:43

我也尝试onchage第一，但输入onchange需要从输入重点。所以用keyup或keydown改变它会更好。 –

是的，我只是编辑@GüneySaramalı –

这是片段Here。一个keyup()函数和一个if检查完成了它们。

来源

2017-10-05 15:08:39

跟踪输入和切换类与jQuery

回答

相关问题