Question

我编写了这段代码，用于验证空值的输入字段它有效，但我用jQuery toggleClass意识到，我可以改进或优化它但我无法想出办法任何帮助将不胜感激。

	$(function() {

	  $('.cont').on('click', '#submit', function(event) {
	    event.preventDefault();

	    $('.cont input').filter(function() {

	      return !this.value.trim();

	    }).addClass('highlight');

	  });

	  //remove red borders if field contains input
	  $('.cont').find('input').blur(function(event) {
	    if ($(this).val() && $(this).hasClass('highlight')) {
	      $(this).removeClass('highlight');
	    }
	  });
	})

.highlight {
  border-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cont">
  <input type="text" name="firstname" placeholder="Firstname">
  <input type="text" name="lastname" placeholder="Lastname">
  <button id="submit">Submit</button>
</div>

Answer 1

toggleClass(class)采用鲜为人知的第二个可选布尔参数＆＃39; state＆＃39;，因此也可以用来删除类而不必跟踪状态......

我建议计算它是否有效的状态，然后将其传递给toggleState（），这样它在没有附加代码的情况下也会在有效时清除红色边框。

＆＃13;

$(function() {

  $('.cont').on('click', '#submit', function(event) {
    event.preventDefault();

    $('.cont input').each(function(it) {
      $(this).toggleClass('highlight', !(this).value.trim());
    });

  });
})

＆＃13;

.highlight {
  border: 1px solid red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cont">
  <input type="text" name="firstname" placeholder="Firstname">
  <input type="text" name="lastname" placeholder="Lastname">
  <button id="submit">Submit</button>
</div>

＆＃13;

如何使用jQuery toggleClass来优化代码

1 个答案: