复选框必须点击两次以执行动画
我创建了一个自定义动画复选框,看起来像一个开关。我使用类名来修改我的复选框的动画。这里是我的代码:复选框必须点击两次以执行动画
HTML
<label>
<input class="cb" type="checkbox">
<div class="ball"></div> <!-- don't mind this -->
</label>
的Javascript
var $ = document.querySelector.bind(document);
$('label').onclick = function() {
if(!$('.cb').checked) {
this.classList.add('clicked');
} else {
this.classList.remove('clicked');
}
}
它成功地工作,但不是完美的,因为在复选框的初始点击(页面加载之后的意思),你必须点击两次才能执行第一个动画。我试过event.stopPropagation()
但它仍然是一样的。我也试过event.preventDefault()
,但它只适用于第一个动画。
我会听取更改事件,而不是标签的单击事件 - 您可能正面临竞争状况。
我的HTML看起来像这样:
<label>
<input id="toggles-animation" type="checkbox">
<span class="animate">
Select me
</span>
</label>
复选框有toggles-animation
的ID,这是我们听的变化的元素。
里面的元素上面有animate
类 - 它将是一个动画。该元素是我们需要添加clicked
类的元素,因此它具有和clicked
和animate
。
我们可以通过添加onchange
听众的复选框输入做到这一点:
var $ = document.querySelector.bind(document);
var el = $('#toggles-animation');
el.onchange = function (evt) {
var animateElement = this.nextSibling.nextSibling;
var toggle = this.checked ? 'add' : 'remove';
animateElement.classList[toggle]('clicked');
};
您可以查询animateElement
任何你喜欢的,我只是用同级元素的方式。重要的是有一个具有动画的类,该类不会被删除或添加,而是一个补充类。
所以,当检查:<span class="animate clicked">
我创建在后台启动绿松石和动画粉红色的演示。你可以看到在Codepen上的工作演示:http://codepen.io/tinacious/pen/WoMoZo
已经解决了这个问题。 '!'是问题 – jst16
嗨,请尝试更改,如果条件$('。cb')。检查删除'!'。 – Ninjaneer
[元素] .checked将在检查输入后立即为真。 – Ninjaneer
@RohithKP'$(this)'将引用文档。 – SLePort