Javascript 如何在脚本中组合两个命令

我有下面的脚本，它的工作方式应该是，单击它，从右边取出一个div，当您单击close div时，它返回到其原始位置。它只工作一次，但如果我尝试单击多次，它不会响应。我知道这是因为我的剧本是如何安排的，所以如果有人能告诉我哪里出了问题，我将不胜感激

<script type="text/javascript">
$(document).ready(function () {
    var clicked = true;
    $(".open-big").on('click', function () {
        if (clicked) {
            clicked = false;
            $(".expandedImage").css({
                "right": "100%"
            });
        }
    });
});
$(document).ready(function () {
    var clicked = true;
    $(".close-big").on('click', function () {
        if (clicked) {
            clicked = false;
            $(".expandedImage").css({
                "right": 0
            });
        }
    });
});
</script>

包装这两个事件是document.ready，并为这两个事件使用一个全局标志

你必须这样写：

$(document).ready(function () {
    var open = true;
    $(".open-big").on('click', function () {
        if (open) {
            open = false;
            $(".expandedImage").css({
                "right": "100%"
            });
        }
    });


    $(".close-big").on('click', function () {
        if (!open) {
            open = true;
            $(".expandedImage").css({
                "right": 0
            });
        }
    });

});

使用一个document.ready。 使用一个全局变量。 使用一个带参数的函数来防止重复。 顺便说一句，只有第一个事件将运行，因为clicked为true并且在全局范围内，我假设您希望这样做

---

您想在这里做什么？

您的问题是，您已将两个处理程序包装在单独的document.ready闭包中，因此您有两个已单击的实例

为了共享对同一个clicked变量的访问，请将所有代码放在一个闭包中，其中只有一个clicked变量在两个事件处理程序的作用域内

$(document).ready(function () {
    var clicked = false;
    $(".open-big").on('click', function () {
        if (clicked) {
            clicked = true;
            $(".expandedImage").css({
                "right": "100%"
            });
        }
    });


    $(".close-big").on('click', function () {
        if (clicked) {
            clicked = false;
            $(".expandedImage").css({
                "right": 0
            });
        }
    });
});

---

并将所有内容放在单个document.ready函数中…单击的变量是两个独立的变量，而不是同一个变量。如果将所有内容都放在一个$document.ready函数中，则不会出现问题。使用hasClass检查当前状态，使用toggleClass在另一个类上更改一个类。不要使用css方法，将所有内容都放在类中。@EhsanSajjad，您可能对它感兴趣。@Teemu试图避免重写整个方法以指出方法错误的原因。如果没有一些html，我真的不确定会发生什么work@Teemu你发现了，我没有把重点放在逻辑上，而是放在格式上

$(document).ready(function () {
    var clicked = false;
    $(".open-big").on('click', function () {
        if (clicked) {
            clicked = true;
            $(".expandedImage").css({
                "right": "100%"
            });
        }
    });


    $(".close-big").on('click', function () {
        if (clicked) {
            clicked = false;
            $(".expandedImage").css({
                "right": 0
            });
        }
    });
});