时间戳

首页 > 解决方案 > 如何让这个类在每次点击时添加

javascript - 如何让这个类在每次点击时添加

问题描述

如果未选中复选框并且单击了按钮，则将抖动效果添加到复选框 div 中，但每次单击按钮时它都不起作用。如果未选中复选框，如何使其在每次单击按钮时发生。classList.add 只添加一次类，所以我使用了切换。 提琴手。

<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>

标签： javascript

解决方案

有两个问题：

  1. 如果未选中第一个复选框，则返回 false。在这种情况下，第二个复选框没有被选中。你必须在最后返回。

  2. toggle在第一次单击时添加了该类，在第二次单击时将其删除。现在我add上课remove了，点击后 820 毫秒。

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>

推荐阅读