Question

我有以下脚本，它应该按照它应该的方式工作，点击它从右边带一个div，当你点击关闭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>

Answer 1

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

为了共享对同一个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
            });
        }
    });
});

Answer 2

将两个事件都包装为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
            });
        }
    });

});

Answer 3

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

    function abcde(percentage){
          if (clicked) {
                clicked = false;
                $(".expandedImage").css({
                    "right": percentage
                });
            }
    }
    </script>

使用一个document.ready。
使用一个全局点击变种
将一个函数与param一起使用以防止重复。

顺便说一下，只有第一个事件才会运行，因为clicked是真的并且在全局范围内（我假设你想要那样）。

你想在这做什么？

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

3 个答案: