Javascript 退出功能，使功能重新工作

我有一些图像，我希望它们在单击时缩放和更改位置（此部分正在工作）。

---

然后，如果我单击“关闭”按钮（部分有效—“关闭”按钮在第一次单击时不会褪色），或者如果我单击屏幕上的任何位置（不知道如何），我希望它们缩小比例，并在再次单击时移回其原始位置（有效）

主要问题是，当单击的图像返回到其原始位置时，没有一个图像是可单击的，因此我不能使该函数多次工作

任何帮助都将不胜感激

jQuery：

    $(document).ready(function(){

    var itemImages = $('.foo, .bar, .foobar, .barfoo');


    $(itemImages).click(function(){
        $(this).addClass("scaled");
        $(itemImages).addClass("blur");
        $(this).removeClass("blur");
        $(itemImages).off('click');
        $('.close').fadeIn('slow');
        $(this).on('click',itemClicked);

    });
    $('.close').click(function(){
        $(itemImages).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
        $(this).fadeOut('fast');
    });

    function itemClicked() {
        $(this).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
    }   
});

CSS:

Html:

---

您应该重新绑定单击事件，而不是在上使用

：

$(document).ready(function(){

    var itemImages = $('.foo, .bar, .foobar, .barfoo');

    var setClick = function(){
        $(itemImages).click(function(){
            $(this).addClass("scaled");
            $(itemImages).addClass("blur");
            $(this).removeClass("blur");
            $(itemImages).off('click');
            $('.close').fadeIn('slow');
            $(this).on('click',itemClicked);
        });
    }
    $('.close').click(function(){
        $(itemImages).removeClass("scaled");
        $(itemImages).removeClass("blur");
        setClick();
        $(this).fadeOut('fast');
    });

    function itemClicked() {
        $(this).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
    }   
});

问题是，
$（）.on（）不是这样工作的：
$（itemImages）。我猜，您试图反转
$（itemImages）.off（'click'）语句。您需要传递事件处理程序，该事件处理程序将连接到
on
函数或再次使用
click
函数。因此，最简单的方法是在单独的函数中定义事件处理程序并再次附加它：


$（文档）.ready（函数（）{
var itemmages=$（'.foo、.bar、.foobar、.barfoo'）；
$（itemImages）。单击（itemImages\u单击）；
$（'.close'）。单击（函数（）{
$（itemImages）.removeClass（“缩放”）；
$（itemImages）.removeClass（“模糊”）；
$（itemImages）。打开（'单击'）；
$（this.fadeOut（'fast'）；
});
函数itemClicked（）{
$（此）.removeClass（“缩放”）；
$（itemImages）.removeClass（“模糊”）；
$（itemImages）。单击（itemImages\u单击）；
}
函数项图像\u单击（e）{
$（此）.addClass（“缩放”）；
$（itemImages）.addClass（“模糊”）；
$（此）.removeClass（“模糊”）；
$（itemImages）.off（'click'）；
$（'.close'）.fadeIn（'slow'）；
$（此）.on（'单击'，itemClicked）；
};
});
.blur{
-webkit过滤器：模糊（5px）；
过渡：.5s-webkit过滤器线性；
}
.缩放{
-webkit转换：规模（2.2）；
左：1300px；
顶部：500px；
z指数：3；
}
.结束{
宽度：86px；
高度：86px；
背景：url（../images/icons.png）左上角；
位置：绝对位置；
右：40px；
顶部：40px；
显示：无；
}
#项目img{
位置：绝对位置；
过渡：所有。2放松；
}
傅先生{
左：94px；
顶部：133px；
宽度：275px；
高度：自动；
}
.酒吧{
左：537px；
顶部：63px；
宽度：317px；
高度：自动；
}
福巴先生{
左：958px；
顶部：86px；
宽度：432px；
高度：自动；
}
巴福先生{
左：1556px；
顶部：77px；
宽度：270px；
高度：自动；
}
您可以执行以下操作


$（文档）.ready（函数（）{
var itemmages=$（'.foo、.bar、.foobar、.barfoo'）；
itemImages.click（函数（）{
if（$（this）.hasClass（'blur'））{
返回；
}
if（$（this）.hasClass（'scaled'））{
重置（）；
返回；
}
$（此）.addClass（“缩放”）；
itemImages.not（this.addClass（“blur”）；
$（此）.removeClass（“模糊”）；
$（'.close'）.fadeIn（'slow'）；
});
$（'.close'）。单击（重置）；
函数重置（）{
itemImages.removeClass（“缩放模糊”）；
$（'.close'）.fadeOut（'fast'）；
}
});
.blur{
-webkit过滤器：模糊（5px）；
过渡：.5s-webkit过滤器线性；
}
.缩放{
-webkit转换：规模（2.2）；
左：1300px；
顶部：500px；
z指数：3；
}
.结束{
宽度：86px；
高度：86px；
背景：url（../images/icons.png）左上角；
位置：绝对位置；
右：40px；
顶部：40px；
显示：无；
}
#项目img{
位置：绝对位置；
过渡：所有。2放松；
}
.foo{
左：94px；
顶部：133px；
宽度：275px；
高度：自动；
}
.酒吧{
左：537px；
顶部：63px；
宽度：317px；
高度：自动；
}
福巴先生{
左：958px；
顶部：86px；
宽度：432px；
高度：自动；
}
巴福先生{
左：1556px；
顶部：77px；
宽度：270px；
高度：自动；
}

我在这里创建了你的JSFIDLE：嗯-FIDLE不工作如果我在屏幕上的任何地方单击，它仍然不存在。太好了！这是工作！这里唯一的问题是，图像在向下缩放并返回其原始位置（在其他图像下滑动）之前，正在失去较高的z索引。你知道如何让它保持较高的z索引，直到它恢复原位吗？@kaTon你可能必须使用转换结束事件句柄OK-非常感谢！我真的很感谢你的回答！
<section id="items" class="fullscreen">
    <div class="close"></div>
    <img class="foo" src="items/image1.png">
    <img class="bar" src="items/image2.png">
    <img class="foobar" src="items/image3.png">
    <img class="barfoo" src="items/image4.png">
</section>

$(document).ready(function(){

    var itemImages = $('.foo, .bar, .foobar, .barfoo');

    var setClick = function(){
        $(itemImages).click(function(){
            $(this).addClass("scaled");
            $(itemImages).addClass("blur");
            $(this).removeClass("blur");
            $(itemImages).off('click');
            $('.close').fadeIn('slow');
            $(this).on('click',itemClicked);
        });
    }
    $('.close').click(function(){
        $(itemImages).removeClass("scaled");
        $(itemImages).removeClass("blur");
        setClick();
        $(this).fadeOut('fast');
    });

    function itemClicked() {
        $(this).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
    }   
});