j查询点击时的定时动画

Question

我试图让复选标记加载动画仅在clicked.closest().yay按钮时发生。我找到了动画，但无法将其处理到我的函数中，它只能在单击和多个实例上运行。

https://codepen.io/moofawsaw/pen/Qrxbxj

(function() {
$(document).ready(function() {
return $(".delete-confirm").each(function() {
var $this;
$this = $(this);
$("button.delete", $this).click(function() {
$(this).toggleClass("confirm");
});
return $("button.yay, button.nay", $this).click(function() {
return $("button.delete", $this).removeClass("confirm");
});
});
});
}.call(this));
$(".yay").click(function() {
ele = this;
setTimeout(function() {
$(ele)
.closest(".post")
.remove();
}, 1500);
});
const yay = document.querySelector(".yay");
const submit = document.querySelector(".submit");
function toggleClass() {
this.classList.toggle("active");
}
function addClass() {
this.classList.add("finished");
}
yay.addEventListener("click", toggleClass);
yay.addEventListener("transitionend", toggleClass);

body {
display: flex;
}
.post {
border: 2px solid;
margin: 15%;
}
.delete-confirm {
border: 2px solid;
position: relative;
display: inline-block;
}
.delete-confirm button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
height: 25px;
width: 25px;
min-width: 25px;
text-align: center;
cursor: pointer;
background-color: #e90000;
color: white;
border: none;
border-radius: 50%;
}
.delete-confirm button.delete {
z-index: 3;
transition: all 0.2s ease 0.1s;
}
.delete-confirm button.delete.confirm {
background-color: transparent;
color: #262a2c;
transition: all 0.2s ease 0.2s;
z-index: 0;
}
.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
visibility: visible;
color: white;
transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}
.delete-confirm button.delete.confirm~button.yay {
-webkit-transform: translate(0, -250%);
transform: translate(0, -250%);
background-color: #6fbd1b;
}
.delete-confirm button.delete.confirm~button.nay {
-webkit-transform: translate(0, -130%);
transform: translate(0, -130%);
background-color: #e90000;
}
.delete-confirm button.yay,
.delete-confirm button.nay {
position: absolute;
top: 0;
color: #262a2c;
visibility: hidden;
z-index: 1;
transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}
.delete-confirm button.yay:focus {
transition-delay: 2s;
}
.delete-confirm button.yay {
left: 0;
}
.delete-confirm button.nay {
right: 0;
}
.delete-confirm button:focus {
outline: none;
}
.yay:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0%;
height: 100%;
}
.yay span {
position: absolute;
line-height: 0;
}
.yay span i {
transform-origin: center center;
}
.yay span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.yay span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
}
.active:before {
width: 100%;
transition: width 500ms linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
@keyframes loading {
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>
<div class="post">Post2
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>

Answer 1

这是因为document.querySelector只返回一个元素。

您可以使用document.querySelectorAll但我不确定如何绑定事件。

简单的解决方案是使用jQuery，因为无论如何你都在使用它。

...
const yay = $(".yay");
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);

(function() {
$(document).ready(function() {
return $(".delete-confirm").each(function() {
var $this;
$this = $(this);
$("button.delete", $this).click(function() {
$(this).toggleClass("confirm");
});
return $("button.yay, button.nay", $this).click(function() {
return $("button.delete", $this).removeClass("confirm");
});
});
});
}.call(this));
$(".yay").click(function() {
ele = this;
setTimeout(function() {
$(ele)
.closest(".post")
.remove();
}, 1500);
});
const yay = $(".yay");
const submit = document.querySelector(".submit");
function toggleClass() {
this.classList.toggle("active");
}
function addClass() {
this.classList.add("finished");
}
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);

body {
display: flex;
}
.post {
border: 2px solid;
margin: 15%;
}
.delete-confirm {
border: 2px solid;
position: relative;
display: inline-block;
}
.delete-confirm button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
height: 25px;
width: 25px;
min-width: 25px;
text-align: center;
cursor: pointer;
background-color: #e90000;
color: white;
border: none;
border-radius: 50%;
}
.delete-confirm button.delete {
z-index: 3;
transition: all 0.2s ease 0.1s;
}
.delete-confirm button.delete.confirm {
background-color: transparent;
color: #262a2c;
transition: all 0.2s ease 0.2s;
z-index: 0;
}
.delete-confirm button.delete.confirm~button.yay,
.delete-confirm button.delete.confirm~button.nay {
visibility: visible;
color: white;
transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s;
}
.delete-confirm button.delete.confirm~button.yay {
-webkit-transform: translate(0, -250%);
transform: translate(0, -250%);
background-color: #6fbd1b;
}
.delete-confirm button.delete.confirm~button.nay {
-webkit-transform: translate(0, -130%);
transform: translate(0, -130%);
background-color: #e90000;
}
.delete-confirm button.yay,
.delete-confirm button.nay {
position: absolute;
top: 0;
color: #262a2c;
visibility: hidden;
z-index: 1;
transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease;
}
.delete-confirm button.yay:focus {
transition-delay: 2s;
}
.delete-confirm button.yay {
left: 0;
}
.delete-confirm button.nay {
right: 0;
}
.delete-confirm button:focus {
outline: none;
}
.yay:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0%;
height: 100%;
}
.yay span {
position: absolute;
line-height: 0;
}
.yay span i {
transform-origin: center center;
}
.yay span:nth-of-type(1) {
top: 50%;
transform: translateY(-50%);
}
.yay span:nth-of-type(2) {
top: 100%;
transform: translateY(0%);
}
.active:before {
width: 100%;
transition: width 500ms linear;
}
.active span:nth-of-type(1) {
top: -100%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
}
.active span:nth-of-type(2) i {
animation: loading 500ms linear infinite;
}
@keyframes loading {
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(10);
}
50% {
transform: scale(0.2);
}
70% {
transform: scale(1.2);
}
90% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">Post1
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>
<div class="post">Post2
<div class='delete-confirm'>
<button class='delete'>
<i class='fa fa-trash-o fa-lg'></i>
</button>
<button class='yay'>
<span class="submit"><i class='fa fa-check'></i></span>
<span class="loading"><i class="fa fa-refresh"></i></span>
</button>
<button class='nay'>
<i class='fa fa-close'></i>
</button>
</div>
</div>