Question

如果未选中该复选框，并且单击了按钮，则摇动效果将添加到复选框div中，但是每次单击该按钮时都不会起作用。如果未选中该复选框，如何使它发生在每次单击按钮时。 classList.add仅添加一次该类，因此我使用了切换。 JsFiddle。

<style>
  .face {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  @keyframes shake {
    10%,
    90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
      transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
      transform: translate3d(4px, 0, 0);
    }
  }
</style>
</style>

<body>

  <br>
  <br>
  <div id="termsdiv">
    <input type="checkbox" id="terms">Terms
  </div>
  <div id="privacydiv">
    <input type="checkbox" id="privacy">Privacy
  </div>
  <br>
  <a id='googlebtn' onclick='return func();' type='submit' href="http://google.com"><img src="https://staging-4.dispatchhealth.com/icons/btn_sign_in_google.png"></a>
</body>
<script>
  function func() {
    var termsCheckbox = document.getElementById("terms");
    var termsdiv = document.getElementById("termsdiv");
    var privacyCheckbox = document.getElementById("privacy");
    var privacydiv = document.getElementById("privacydiv");
    if (termsCheckbox.checked == false) {
      termsdiv.classList.toggle("face");
      // alert("You must agree to the terms");
      return false;
    }
    if (privacyCheckbox.checked == false) {
      privacydiv.classList.toggle("face");
      // alert("You must agree to the privacy");
      return false;
    }
  }
</script>

Answer 1

有两个问题：

如果未选中第一个复选框，则返回false。在这种情况下，未选中第二个复选框。您必须在最后返回。
toggle在第一次单击时添加了班级，在第二次单击时删除了班级。现在，我add上课了，单击了820ms之后就remove了。

function func() {
  var termsCheckbox = document.getElementById("terms");
  var termsdiv = document.getElementById("termsdiv");
  var privacyCheckbox = document.getElementById("privacy");
  var privacydiv = document.getElementById("privacydiv");
  var bReturnValue;
    
  if (termsCheckbox.checked === false) {  
    termsdiv.classList.add("face"); //Add Class
    setTimeout(function(){
    	termsdiv.classList.remove("face"); //Remove Class after 820ms
    },820);
     bReturnValue = false; //Store return value in variabel
  }
  
  if (privacyCheckbox.checked === false) {
   privacydiv.classList.add("face");
    setTimeout(function(){
    	privacydiv.classList.remove("face");
    },820);
    bReturnValue = false;
  }
  return bReturnValue; //Return return value
}

 .face {
   animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   perspective: 1000px;
 }

 @keyframes shake {
   10%,
   90% {
     transform: translate3d(-1px, 0, 0);
   }
   20%,
   80% {
     transform: translate3d(2px, 0, 0);
   }
   30%,
   50%,
   70% {
     transform: translate3d(-4px, 0, 0);
   }
   40%,
   60% {
     transform: translate3d(4px, 0, 0);
   }
 }

<br>
<br>
<div id="termsdiv">
  <input type="checkbox" id="terms">Terms
</div>
<div id="privacydiv">
  <input type="checkbox" id="privacy">Privacy
</div>
<br>
<a id='googlebtn' onclick='return func();' type='submit' href="http://google.com"><img src="http://lorempixel.com/300/100/"></a>

Answer 2

切换方式->

当您单击按钮时，它会向复选框div中单独添加“ face”类，从而使其震动。

再次单击按钮时，它将从复选框div中删除“ face”类，该类不起作用。

因此，在添加类后立即设置一个超时时间以删除“ face”类，使超时时间为<=摇动时间（此处为820毫秒）

请在此处检查工作副本： https://github.com/helloritesh000/how-to-make-this-class-to-add-on-every-click

if (termsCheckbox.checked == false) {
            termsdiv.classList.add("face");
            setTimeout(function(){ console.log("function func1212"); termsdiv.classList.remove("face"); }, 800);
            // alert("You must agree to the terms");
            return false;
        } 
        if(privacyCheckbox.checked == false) {
            privacydiv.classList.add("face");
            setTimeout(function(){ privacydiv.classList.remove("face"); }, 800);
            // alert("You must agree to the privacy");
            return false;
        }

如何使此类在每次点击时添加

2 个答案: