如何使用每个 function ZD223E1439188E4578349D542 在两个相同的 class 名称上添加 class？

Question

I am trying to add class on two input type date using classname , how ever it is only applying on one input . Here is the code below:

 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>

Answer 1

 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 will stop function from executing so after first input function will not run. You should remove return false in order to make it work. Also inputs should have a unique ID - See more here . I tweaked your code a little bit but this should work.