图片库jQuery问题

Question

我正在开发一个小的图像库，当你点击它时，它只会放大图片。我用jQuery通过添加和删除类来制作它。

$(".image").click(function() {
    $(this).addClass("big").removeClass("image").css("position", "fixed").animate({
        height: '480px',
        width: '717px',
        top: '5%',
        left: '50%',
        marginLeft: '-358px',
        borderWidth: '40px',
        zIndex: '100'
    }, "slow");
});
$(".big").click(function() {
    $(this).removeClass("big").addClass("image").css("position", "auto").animate({
        height: '234px',
        width: '350px',
        top: 'auto',
        left: 'auto',
        marginLeft: '0px',
        borderWidth: '0px',
        zIndex: 'auto'
    }, "slow");
});

我遇到的问题是，它确实删除了图像类并添加了大类，但它不能反过来工作，我做错了什么？

Answer 1

您想要委托第二个事件，因为在最初加载页面时，没有任何元素具有该类，因此选择器返回零个元素，并且不附加任何内容。使用委派，您可以将事件附加到更高的元素，通常最好将其放在最接近的父元素上，该父元素稍后会在动态创建的元素存在时将事件传递给该元素。

示例：

$("body").on('click', '.big', function() {
    $(this).removeClass("big").addClass("image").css("position", "auto").animate({
        height: '234px',
        width: '350px',
        top: 'auto',
        left: 'auto',
        marginLeft: '0px',
        borderWidth: '0px',
        zIndex: 'auto'
    }, "slow");
});

我在这里使用了body，因为我对HTML不够熟悉，不知道最接近的元素。这基本上是说body元素将监视点击事件，如果点击事件恰好在类较大的元素上，它将把事件传递给它