问题描述
如果未选中复选框并且单击按钮，则会将摇晃效果添加到复选框 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>
1楼
有两个问题：
如果未选中第一个复选框，您将返回 false。 在这种情况下没有选中第二个复选框。 最后你必须回来。
toggle在第一次单击时添加了类，在第二次单击时将其删除。 现在我add该类并在单击 820 毫秒后将其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>
2楼
切换如何工作-->
当您单击按钮时，它会单独将“face”类添加到复选框 div 中，从而使其震动。
当您再次单击按钮时，它会从不执行任何操作的复选框 div 中删除“face”类。
因此，在添加类后设置一个设置超时以删除“face”类，使超时 <= 抖动时间（此处为 820 毫秒）
请在此处查看工作副本： :
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;
}