在运行第一个函数后调用函数答案

【问题标题】：Call a function after a first function is ran在运行第一个函数后调用函数
【发布时间】：2013-02-02 17:20:27
【问题描述】：

我想通过单击页面上的某个位置来隐藏 div，但前提是该 div 是通过单击预览首先显示的。

我有这个：

$(function() {  
    $("#videopreview").click(function() {
    $("#videolarge").css({ display: 'block' });
    $("#videopreview").css({ display: 'none' });

        $("#videolarge").click(function(){ return false; });
        $(document).one("click", function() { 
        $("#videolarge").css({ display: 'none' });
        $("#videopreview").css({ display: 'block' });

        });
    });
});

它同时运行这两个函数，所以什么也没发生 :)

更新：

$(function() {  
$("#videopreview").click(function() {
    $("#videolarge").css({ display: 'block' });
    $("#videopreview").css({ display: 'none' });
});
$("#videolarge").click(function(){ return false; });
$("#videopreview").click(function(){ return false; });
$(document).click(function() { 
    $("#videolarge").css({ display: 'none' });
    $("#videopreview").css({ display: 'block' });
});
});

我可以使用 remove() 但是一旦隐藏我就不能再次运行它（这是有道理的）。我该如何处理？

【问题讨论】：

代替匿名函数，编写两个单独的函数并命名。然后你可以更好地看到它们是如何运行的，哪个调用哪个。如果在单击预览之前添加一个为零的标志（两个函数之外的变量），然后才允许其他步骤发生，那么您可能正在解决自己的问题。
你真的需要解释这个问题，因为它不是很清楚。也许给出标记并解释您想要实现的目标。
我相信需要的是例如单击时将显示完整视频播放器的缩略图预览。显示后，单击页面上的任意位置将重新隐藏视频播放器并重新显示预览缩略图。

标签： jquery

【解决方案1】：

您不应该在另一个事件函数中使用该事件。那是行不通的。

改用此代码：

$(function() {  
    $("#videopreview").click(function() {
        $("#videolarge").css({ display: 'block' });
        $("#videopreview").css({ display: 'none' });
    });
    $("#videolarge").click(function(){ return false; });
    $(document).one("click", function() { 
        $("#videolarge").css({ display: 'none' });
        $("#videopreview").css({ display: 'block' });
    });
});

【讨论】：

感谢之前的答案，我找到了解决方案。现在出现了一个新问题。在我的 div 中，我运行了一个视频。当我使用“display：none”隐藏时，视频仍在后台运行。我可以用 jquery 解决这个问题还是在 Youtube API 端？
@user1708580 看看here（我在伊朗，所以我看不到该网站:() 或者你可以看看this question 或者最好的方法是谷歌它！
是的，你是对的，我正在使用 Youtube 视频。但我会将它用于几个视频平台。所以我想用 Jquery 找到一个通用的解决方案，而不是每个 API。
@user1708580 我认为没有通用的方法，您应该为每个api都这样做！
好的，谢谢！我终于找到了一个解决方案，即使用 .remove() 而不仅仅是 css

【解决方案2】：

如果您从一开始就附加了两个处理程序，但在 document.click 处理程序中，请在尝试执行任何操作之前检查大视频是否可见，并检查是否不是单击的视频预览。比如：

$(function()
{  
    $("#videopreview").on('click', function()
    {
        $("#videolarge").css({ display: 'block' });
        $("#videopreview").css({ display: 'none' });
    });

    $(document).on("click", function(e)
    {
        if ($("#videolarge").is(":visible") && e.target.id !== "videopreview")
        {
            $("#videolarge").css({ display: 'none' });
            $("#videopreview").css({ display: 'block' });
        }
    });
});

附注：与其直接设置两个元素的 CSS 属性，不如拥有可以添加或删除的适当 CSS 类可能更简洁、更快捷。

【讨论】：