Question

HTML＆amp; JS为表单提交而编写。这可以正常工作。

但是，我希望通过使用任何循环迭代来最小化JS代码长度。

在“全名”和“全名”之间'预订参考号码'只有ID＆amp;班级名称正在发生变化剩下的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循环。

Jquery - 通过循环表单字段JS代码

1 个答案: