如果未选中复选框并且单击按钮，则会将抖动效果添加到复选框 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>最佳答案
有两个问题:
如果第一个复选框未选中，您将返回 false。在这种情况下，没有选中第二个复选框。你必须在最后返回。
toggle在第一次单击时添加类，在第二次单击时将其删除。现在我添加类并在点击 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>关于javascript - 如何让这个类在每次点击时添加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54666194/