javascript - jQuery中通过 'If Statement'切换动画

Question

我在 jQuery 中有一些代码，我想在其中通过单击 div 来打开或关闭开关动画。这是代码。当我测试它时，它不起作用。但是，如果我删除第 7 行的 toggle = true，它只会以一种方式工作，我无法将其关闭。

$(document).ready(function () {
    $("#switch").click(function () {
        var toggle = false;
        if (toggle == false) {
            $("#circle").css("left", "27px");
            $("#white_rect").attr("src", "green_rect.png");
            toggle = true;
        }
        if (toggle == true) {
            $("#circle").css("left", "1px");
            $("#white_rect").attr("src", "white_rect.png");
            toggle = false;
        }
    });
});

Answer 1

您需要在点击处理程序之外声明 toggle 变量...否则在每次点击调用中，该变量将被重新初始化，因此该变量的值将始终为 false。

$(document).ready(function () {
    //declare it here
    var toggle = false;
    $("#switch").click(function () {
        if (toggle == false) {
            $("#circle").css("left", "27px");
            $("#white_rect").attr("src", "green_rect.png");
            toggle = true;
        //also don't use a separate if block here as it will be affected by the execution of the above if block
        } else {
            $("#circle").css("left", "1px");
            $("#white_rect").attr("src", "white_rect.png");
            toggle = false;
        }
    });
});

---

$(document).ready(function () {
    //declare it here
    var toggle = false;
    $("#switch").click(function () {
        if (toggle) {
            $("#circle").css("left", "1px");
            $("#white_rect").attr("src", "white_rect.png");
        } else {
            $("#circle").css("left", "27px");
            $("#white_rect").attr("src", "green_rect.png");
        }
        toggle = !toggle;
    });
});