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元素将监视click事件，如果click事件恰好位于类big的元素上，它将把事件传递给它。

图库jQuery问题

1 个答案: