跟蹤輸入和切換類與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

回答

相關問題