jQuery的单击事件仅此一次合作,但第二次它不是小提琴
$('.animateBtn').on('click', function() {
$(this).addClass('OFF');
$(this).next('div').addClass('animate');
var btnText = $(this).text('Aniamte ON');
if($(this).next('div').hasClass('animate')) {
$(this).text('Aniamte OFF')
}
$('.OFF').on('click', function() {
if($(this).hasClass('OFF')){
$(this).removeClass('OFF');
$(this).next('div').removeClass('animate');
$(this).text('Aniamte ON')
}
})
})
使用事件委托来处理动态变化的类。
$(document).on('click', '.animateBtn', function () {
$(this).addClass('OFF').removeClass('animateBtn');
$(this).next('div').addClass('animate');
var btnText = $(this).text('Aniamte ON');
$(this).text('Aniamte OFF');
});
$(document).on('click', '.OFF', function () {
$(this).removeClass('OFF').addClass('animateBtn');
$(this).next('div').removeClass('animate');
$(this).text('Aniamte ON')
});
.animate {
background: url(http://lorempixel.com/100/100);
height: 100px;
width: 100px;
-webkit-animation: slide 2s linear infinite;
-moz-animation: slide 2s linear;
animation: slide 2s linear infinite;
}
@-webkit-keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 0;
}
}
@-moz-keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 0;
}
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="animateBtn">Animate ON</button>
<div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句