Question

AIM：我计划拥有多个按钮。每个按钮将一个接一个地出现，点击按钮它将激活一个带有动画的css类

问题：最初，点击第一个按钮就可以了。但是，在切换css类之前，第二个按钮需要双击。

   $("#bt,#bt2").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt").hide();
        $("#bt2").show();
   });

在一些研究的背后，我发现解决这个问题的方法是在每个按钮的jquery中创建一个单独的单击函数。

新问题：现在允许在一次点击时激活第二个按钮，但现在不会触发toggleClass。

http://jsfiddle.net/afj98q8n/

    $("#bt").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt").hide();
        $("#bt2").show();
    });

    $("#bt2").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt2").hide();
        $("#bt3").show();
    });

作为一个新手，我现在不确定下一步该尝试什么。希望有人可以就此问题的解决方案向我提出建议吗？

更进一步，我打算在它们消失之前使用类似的方法在'按钮'上激活/切换动画，这可能会使这进一步复杂化？

感谢。

已解决： http://jsfiddle.net/grfLdyqw/7/

Answer 1

单击第一个按钮后，动画类将添加到div中，第一个单击第二个按钮将从div中删除该类（如果不存在则切换添加一个类，如果存在则将其删除），所以这就是你总是需要点击两次的原因

此代码将在动画完成需要1.5秒后自动删除该类

<input ng-model="searchVal" type="search">
<p>searchVal = {{ searchVal }}</p>

这里工作的jsfiddle http://jsfiddle.net/grfLdyqw/4/

Answer 2

在第二次单击功能中，而不是切换我们addClass。

$(document).ready(function () {
    $("#bt").show();
    $("#bt2").hide();
    $("#bt3").hide();

    $("#bt").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt").hide();
        $("#bt2").show();
    });

    $("#bt2").click(function () {
        $(".box1").addClass("box1-change");

        $("#bt2").hide();
        $("#bt3").show();
    });
});

Jquery点击功能不会激活toggleClass

2 个答案: