Jquery - ループによるフォームフィールドJSコード

Question

以下HTML & JSフォーム提出のために書かれたJS。これは正常に動作します。

しかし、私は任意のループ反復を使用してJSコードの長さを最小限にしたいです。

'フルネーム'の間& '予約番号' ID &クラス名が変更されています。残りのJSスクリプトは同じです。

任意のループ反復を使用してJSコードをきれいにすることはできますか？

おかげ

HTML：

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 fullname"> 
    <div class="form-title">Full name</div> 
    <input type="text" name="Full Name" id="fullname" data-fullname="Full name is missing"> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 bookingrefno"> 
    <div class="form-title">Booking reference number</div> 
    <input type="text" name="Booking Reference Number" id="bookingrefno" data-refno="Booking Reference No. is not valid"> 
    </div> 
</div> 

JS：

/* Full Name*/ 
$('#fullname').focus(function(){ 
    $('.fullname .form-title').addClass('input-filled'); 
    $(this).addClass('input-focused'); 
    $(this).removeClass('has-error'); 
    $(this).parent().find('.form-title').removeClass('has-error'); 
}); 
$('#fullname').blur(function(){ 
    if($('#fullname').val() == ''){ 
    $('.fullname .form-title').removeClass('input-filled'); 
    $(this).removeClass('input-focused'); 
    } else { 
    $('.fullname .form-title').addClass('input-filled'); 
    $(this).addClass('input-focused'); 
    } 
}); 
$('.fullname .form-title').click(function(){ 
    $(this).addClass('input-filled'); 
    $('#fullname').addClass('input-focused'); 
}); 

/* Ref No */ 
$('#bookingrefno').focus(function(){ 
    $('.bookingrefno .form-title').addClass('input-filled'); 
    $(this).addClass('input-focused'); 
    $(this).removeClass('has-error'); 
    $(this).parent().find('.form-title').removeClass('has-error'); 
}); 
$('#bookingrefno').blur(function(){ 
    if($('#bookingrefno').val() == ''){ 
    $('.bookingrefno .form-title').removeClass('input-filled'); 
    $(this).removeClass('input-focused'); 
    } else { 
    $('.bookingrefno .form-title').addClass('input-filled'); 
    $(this).addClass('input-focused'); 
    } 
}); 
$('.bookingrefno .form-title').click(function(){ 
    $(this).addClass('input-filled'); 
    $('#bookingrefno').addClass('input-focused'); 
}); 

Answer 1

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 fullname validate"> 
    <div class="form-title">Full name</div> 
    <input type="text" name="Full Name" id="fullname" data-error-msg="Full name is missing"> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 bookingrefno validate"> 
    <div class="form-title">Booking reference number</div> 
    <input type="text" name="Booking Reference Number" id="bookingrefno" data-error-msg="Booking Reference No. is not valid"> 
    </div> 
</div> 

$('.validate') 
    .on('focus','input',function(){ 
    var $this = $(this); 
    $this 
     .addClass('input-focused') 
     .removeClass('has-error'); 
    $('.form-title',$this.parent()) 
     .addClass('input-filled') 
     .removeClass('has-error'); 
    }) 
    .on('blur','input',function(){ 
    var $this = $(this); 
    if($this.val() == '') { 
     $this.removeClass('input-focused'); 
     $('.form-title',$this.parent()).addClass('input-filled'); 
    } 
    else { 
     $this.addClass('input-focused'); 
     $('.form-title',$this.parent()).removeClass('input-filled'); 
    } 
    }) 
    .on('click','.form-title',function(){ 
    var $this = $(this); 
    $this.addClass('input-filled'); 
    $('input',$this.parent).addClass('input-focused'); 
    }); 

クラスvalidateを入力ラッパーのそれ​​ぞれに追加し、それを選択します。ほとんどのjQuery関数は、実質的に仮想の.forEachループである選択項目のすべての要素に対して作用します。