填充所有输入后如何激活动画？答案

【问题标题】：How can I activate an animation once all inputs are filled?填充所有输入后如何激活动画？
【发布时间】：2021-05-07 02:02:38
【问题描述】：

我在一个 div 和一个提交按钮中有 3 个输入。我从库中加载了一个动画并将其添加到提交按钮。

我想要的是提交按钮，一旦所有三个输入都具有某种值（至少一个字符），就可以进行动画处理。

以下是我目前所拥有的，但它不起作用。我需要添加或更改什么？

$allInputFields = $('#inputFields .inputSection input')
$submitButton = $('#submitButton')
$submitButton.removeClass('animate__animated', 'animate__tada')

for (let i = 0; i < $allInputFields; i++) {
    if ($allInputFields[i].value) {
        $submitButton.toggleClass('animate__animated', 'animate__tada')
    }
}

<head>
<!-- Animation from Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

</head>

<body>

    <div id="inputFields">
    
          <div class="inputSection">
              <h3>input 1</h3>
              <input>
          </div>

          <div class="inputSection">
            <h3>input 2</h3>
            <input>
          </div>

          <div class="inputSection">
            <h3>input 3</h3>
            <input>
          </div>

    </div>

    <br>
    <br>
    
    <div>
            <button id="submitButton" class="animate__animation animate__wobble">Submit</button>
        </div>

</body>

【问题讨论】：

你为什么不用form标签？

标签： javascript html jquery animation jquery-animate

【解决方案1】：

您可以使用 .each 循环来检查任何输入是否为空，具体取决于此 addClass animate__tada 或如果之前添加则将其删除。

演示代码：

$(".inputSection input").on("change", function() {
  var flag = true; //set flag
  $("#submitButton").removeClass('animate__tada').addClass('animate__animated') //add default class
  //loop through each inputs
  $("#inputFields .inputSection input").each(function() {
    if ($(this).val().trim() == "") {
      flag = false; //if empty 
      return false //exit
    }
  })
  //if true
  if (flag) {
    $("#submitButton").removeClass('animate__animated').addClass('animate__tada') //all ok...
  }
})

.animate__animated {
  color: red;
}

.animate__tada {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- Animation from Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />


<div id="inputFields">

  <div class="inputSection">
    <h3>input 1</h3>
    <input>
  </div>

  <div class="inputSection">
    <h3>input 2</h3>
    <input>
  </div>

  <div class="inputSection">
    <h3>input 3</h3>
    <input>
  </div>

</div>

<br>
<br>

<div>
  <button id="submitButton" class="animate__animation animate__wobble">Submit</button>
</div>

【讨论】：