复选框必须点击两次以执行动画

我创建了一个自定义动画复选框，看起来像一个开关。我使用类名来修改我的复选框的动画。这里是我的代码：复选框必须点击两次以执行动画

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()，但它只适用于第一个动画。

来源

2016-12-03 jst16

嗨，请尝试更改，如果条件$（'。cb'）。检查删除'！'。 – Ninjaneer

[元素] .checked将在检查输入后立即为真。 – Ninjaneer

@RohithKP'$（this）'将引用文档。 – SLePort

我会听取更改事件，而不是标签的单击事件 - 您可能正面临竞争状况。

我的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

来源

2016-12-03 07:03:48 Tina

已经解决了这个问题。 '！'是问题 – jst16

复选框必须点击两次以执行动画

回答

相关问题