如何避免jQuery中的重复 [英] How to avoid repetition in jQuery

问题描述

我一直在为表单编写一些自定义jQuery验证，并且发现我在多次编写相同的元素.如果可能的话，我真的可以使用一些帮助来使它更干燥".我在下面提供了一个示例，如果有人可以指出正确的方向，我将非常感激.

I have been writing some custom jQuery validation for a form and have found I am writing the same elements several times. I could really use some help to be more 'DRY' if possible. I've included an example below if anyone could point me in the right direction i'd very much appreciate it.

<div class="first-name-wrapper">
    <label for="first_name">First Name:</label>
    <input class="first-name" type="text" name="first_name" id="first_name">
    <div class="validation-msg first-name-error hide">
        <p><i class="fas fa-exclamation`enter code here`-circle"></i> Please tell us your first name</p>
    </div>
</div>
<div class="last-name-wrapper">
    <label for="last_name">Last Name:</label>
    <input class="last-name" type="text" name="last_name" id="last_name">
    <div class="validation-msg last-name-error hide">
        <p><i class="fas fa-exclamation-circle"></i> Please tell us your last name</p>
</div>

$('.first-name').on('input', function () {
    if($('.first-name').val() != "") {
        $('.first-name-wrapper').removeClass('has-error');
        $('.first-name-error').addClass('hide');
    }
});
//last name
$('.last-name').on('input', function () {
    if($('.last-name').val() != "") {
        $('.last-name-wrapper').removeClass('has-error');
        $('.last-name-error').addClass('hide');
    }
});

基本上，所有这些操作都是检查输入内容是否包含输入内容，然后查找包含的包装器并删除"has-error"类，如果输入不为空，则隐藏验证消息.

Essentially all this does is check that when the input has something typed in it, it finds the containing wrapper and removes the 'has-error' class and hides the validation message if the input is not empty.

推荐答案

要使此代码更加干燥(即，不要重复自己)，可以在元素上放置通用类，以按行为对它们进行分组.然后，您可以将事件处理程序挂接到这些类，并使用DOM遍历将元素彼此关联.

To make this code more DRY (ie. Don't Repeat Yourself), you can put common classes on the elements to group them by behaviour. Then you can hook event handlers to those classes and use DOM traversal to relate the elements to each other.

还请注意，您需要一个else语句，以便在包装器上显示验证消息和错误类.这可以通过使用toggleClass()并提供一个布尔值来指示在什么情况下应该添加/删除类来更简单地实现.试试这个:

Also note that you need an else statement in order to display the validation messages and error class on the wrapper. This can be achieved more simply by using toggleClass() and providing a boolean value to indicate under what circumstances the class should be added/removed. Try this:

$('.field').on('input', function() {
  var $field = $(this);
  $field.closest('.field-wrapper').toggleClass('has-error', $field.val().trim() == "");
  $field.next('.validation-msg').toggleClass('hide', $field.val().trim() != "");
});

.has-error { color: #C00; }
.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-wrapper">
  <label for="first_name">First Name:</label>
  <input class="field" type="text" name="first_name" id="first_name">
  <div class="validation-msg hide">
    <p><i class="fas fa-exclamation`enter code here`-circle"></i> Please tell us your first name</p>
  </div>
</div>
<div class="field-wrapper">
  <label for="last_name">Last Name:</label>
  <input class="field" type="text" name="last_name" id="last_name">
  <div class="validation-msg hide">
    <p><i class="fas fa-exclamation-circle"></i> Please tell us your last name</p>
  </div>
</div>

此模式的好处是，只要字段周围的HTML结构保持一致，它就可以无限扩展.

The benefit of this pattern is that it is infinitely extensible, as long as the HTML structure around the fields remains consistent.

这篇关于如何避免jQuery中的重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！