jquery函数只能工作一次
我有一个画廊类型的页面缩略图。当你点击一个拇指时,它会将与该拇指相关的图像加载到一个隐藏的div中,当它们完成加载然后div滑动打开。如果您单击另一个拇指,则会关闭div,清除内容,加载新内容,然后再次打开它。当您加载页面时,您可以单击一个拇指,然后单击另一个,但如果您返回到第一个拇指并单击该div不会再次打开,不知道为什么。感谢您的帮助。jquery函数只能工作一次
我对它有jsbin在这里设立http://jsbin.com/epawub/12/edit
我已成立了拇指的JavaScript如下:
var imgCount = 0;
var image=$('#images');
$('#klossviolins').click(function() {
console.log("Loading...");
$('#images').slideUp(500, function() {
$("#images").empty().ready(function(){
$("<img>", {
src: "http://www.klossal.com/images/klossviolins/home.jpg"
}).appendTo("#images").load(onImage);
$("<img>", {
src: "http://www.klossal.com/images/klossviolins/services.jpg"
}).appendTo("#images").load(onImage);
});
});
$("#info_header").empty();
$('#info_header').append("Kloss Violins Website");
});
$('#light_dance').click(function() {
console.log("Loading...");
$('#images').slideUp(500, function() {
$("#images").empty().ready(function(){
$("<img>", {
src: "http://www.klossal.com/light_dance_1.jpg"
}).appendTo("#images").load(onImage);
$("<img>", {
src: "http://www.klossal.com/light_dance_var.png"
}).appendTo("#images").load(onImage);
$("<img>", {
src: "http://www.klossal.com/light_dance_2.jpg"
}).appendTo("#images").load(onImage);
});
});
$("#info_header").empty();
$('#info_header').append("Dancing With Light Series");
});
function onImage(e)
{
console.log("Image loaded");
imgCount++;
if (imgCount == image.children().length)
{
image.slideDown(500);
}
}
您设置图像的之前,必须绑定到加载事件src值,否则如果图像被缓存,则在绑定到它之前将触发加载事件。
$("<img>").load(onImage).attr("src","http://www.klossal.com/light_dance_1.jpg").appendTo("#images");
// repeat for all similar
此外,请确保您复位imgCount回到0
...
if (imgCount == image.children().length)
{
image.slideDown(500);
imgCount = 0;
...
所以我更新了jsbin,同样的问题仍然存在,如果我点击第一个,那很好,然后第二个,没关系,然后回到第一个没有任何反应。 http://jsbin.com/epawub/15/edit – loriensleafs 2013-02-28 15:58:52
你永远不会重置imgCount回到0,请参阅编辑http://jsbin.com/epawub/16/edit – 2013-02-28 16:05:00
awww那做到了,你是男人,非常感谢花时间帮助我 – loriensleafs 2013-02-28 16:08:11
。就绪并没有做什么,你觉得它在你的代码。 – 2013-02-28 15:50:16
嗯,它做什么? – loriensleafs 2013-02-28 15:51:31
你的情况绝对没有,它只是立即运行它里面的代码,因为'document'已经准备好了。 – 2013-02-28 15:53:31