只调用一次函数
我有3个div( #Mask #Intro #Container
)所以如果你点击Mask,Intro会被隐藏并且容器会出现。 问题是我只想加载一次,不是每次刷新页面或任何时候点击菜单或链接等。
我怎样才能做到这一点?
这是我现在使用的脚本:
$(document).ready(function(){ $("div#mask").click(function() { $("div#intro").fadeToggle('slow'); $("div#container").fadeToggle('slow'); $("div#mask").css("z-index", "-99"); }); });
谢谢!
您可以尝试使用简单的计数器。
// count how many times click event is triggered var eventsFired = 0; $(document).ready(function(){ $("div#mask").click(function() { if (eventsFired == 0) { $("div#intro").fadeToggle('slow'); $("div#container").fadeToggle('slow'); $("div#mask").css("z-index", "-99"); eventsFired++; // <-- now equals 1, won't fire again until reload } }); });
要坚持这一点,您需要设置一个cookie 。 (例如$.cookie()
如果你使用那个插件)。
// example using $.cookie plugin var eventsFired = ($.cookie('eventsFired') != null) ? $.cookie('eventsFired') : 0; $(document).ready(function(){ $("div#mask").click(function() { if (eventsFired == 0) { $("div#intro").fadeToggle('slow'); $("div#container").fadeToggle('slow'); $("div#mask").css("z-index", "-99"); eventsFired++; // <-- now equals 1, won't fire again until reload $.cookie('eventsFired', eventsFired); } }); });
要在以后删除cookie:
$.cookie('eventsFired', null);
一旦被调用,只需指向一个空函数。
var myFunc = function(){ myFunc = function(){}; // kill it console.log('Done once!'); // your stuff here };
网页是无状态的 ,因为它们在页面刷新之间不保持状态。 当你重新加载页面时,它不知道过去发生了什么。
cookies救援! 您可以使用Javascript (并且jQuery有一些很好的插件使其更容易)在客户端的浏览器上存储变量。 单击蒙版时存储cookie,以便在下次加载页面时它永远不会显示。
这段代码将非常适合您,它是jquery提供的标准方法,用于绑定您只想执行一次的事件
$(document).ready(function(){ $("div#mask").one('click', function() { $("div#intro").fadeToggle('slow'); $("div#container").fadeToggle('slow'); $("div#mask").css("z-index", "-99"); }); });