Jquery点击功能不激活toggleClass

Question

AIM: 我打算有多个按钮。每个按钮都会一个接一个地出现，点击按钮后会激活一个 css class，里面有一个动画

问题： 最初，单击第一个按钮即可。然而，第二个按钮需要在切换 css class 之前双击。

   $("#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();
    });

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

接下来，我计划在 'buttons' 上使用类似的方法 activate/toggle 在它们消失之前制作一个动画，这可能会使事情进一步复杂化？

谢谢。

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

Answer 1

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

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

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

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

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

这里的工作 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

Jquery click function does not activate toggleClass

javascript

css

jquery

click

toggleclass