2013-02-02 35 views
1

我想通过单击页面上的某处来隐藏div,但仅当通过单击预览显示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' }); 
}); 
}); 

我可以使用删除(),但一旦隐藏我不能再运行它(有道理)。我该如何处理?

+0

而不是匿名函数,写两个单独的函数与名称。那么你可以更好地看到他们如何运行,哪些呼叫哪个。如果添加一个标志(两个函数之外的变量)为零,直到点击预览,然后才允许其他步骤发生,那么您可能正在解决自己的问题。 – Floris

+0

你真的需要解释这个问题,因为它不是很清楚。也许给标记并解释你想达到什么。 –

+0

我相信所需要的是一个缩略图预览,当点击时会显示完整的视频播放器。一旦显示,点击页面上的任何位置将重新隐藏视频播放器并重新显示预览缩略图。 –

回答

0

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

使用此代码来代替:

$(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' }); 
    }); 
}); 
+0

感谢以前的答案,我找到了解决方案。 现在出现了一个新问题。 在我的div中,我运行了一段视频。当我用“display:none”隐藏时,视频仍在后台运行。我可以用jquery解决这个问题,还是在Youtube API方面? – user1708580

+0

@ user1708580你使用YouTube来播放视频吗? –

+0

@ user1708580看看[这里](https://developers.google.com/youtube/js_api_reference)(我在伊朗,所以我看不到该网站:()或者你可以看看[这个问题](http://stackoverflow.com/questions/7839638/cant-figure-out-how-to-pause-youtube-video-on-click)或者最好的方法是谷歌它! –

0

如果你从一开始就重视这两个处理器,但在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类,您可以添加或删除。

相关问题