时间戳

首页 > 解决方案 > 如何使用每个函数 jquery 在两个相同的类名上添加一个类？

javascript - 如何使用每个函数 jquery 在两个相同的类名上添加一个类？

问题描述

我正在尝试添加class两种input类型的日期classname，但它只适用于一种input。下面是代码：

var caliqui_button  = $("#caliqui-submit");
  $(caliqui_button).click( function(e) {
    e.preventDefault();
    var fields = $(".date_caliqui");
    fields.each(function() {
            if($(this).hasClass("date_caliqui")){
              errortInput(this);
              return false;
              
            }
        
        });
    
});

function errortInput(id){
      $(id).addClass('error');
      setTimeout(function() {
          $(id).removeClass('error');
        }, 300);
    }
.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui" name="date_caliqui[]">
<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui" name="date_caliqui[]">
<button type="submit" class="btn btn-primary" id="caliqui-submit">Submit</button>

标签： javascripthtmljquery

解决方案

var caliqui_button  = $("#caliqui-submit");
var fields = $(".date_caliqui");

$(caliqui_button).click( function(e) {
  e.preventDefault();
  fields.each(function() {
    errortInput(this);
  });

});

function errortInput(element){
  $(element).addClass('error');
  setTimeout(function() {
      $(element).removeClass('error');
    }, 2000);
}
.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui_0" name="date_caliqui[]">
<input type="date" class="form-control form-control-sm date_caliqui" id="date_caliqui_1" name="date_caliqui[]">
<button type="submit" class="btn btn-primary" id="caliqui-submit">Submit</button>

return false将停止执行函数，因此在第一个输入函数之后将不会运行。您应该删除return false以使其正常工作。输入也应该有一个唯一的 ID -在此处查看更多信息。我稍微调整了您的代码，但这应该可以。

推荐阅读