为什么我的放大jQuery不能正常工作？

Question

我希望我的图像在单击时增加一倍，并在再次单击时返回到正常大小。工作原理：我已成功将“未缩放”类添加到正确的图像。单击图像时，它们将删除“未缩放”类，并添加了“缩放”类，并且它们的大小增加了一倍。当我再次单击它们时，什么也没发生。

您可以查看问题here。只需单击任何图像。

这是我的HTML：

<figure>
        <img src="./images/certcentral/certcentral01.png" class="image-outline">
        <figcaption>Fig. 1: The certification experience.</figcaption>
</figure>

这是我的CSS：

figure img {
margin-left: 0px;
max-width: 400px;
transition: transform .4s;
}

.unzoomed:hover {
cursor: zoom-in;
}


.zoomed {
transform: scale(2);

}


.zoomed:hover {
cursor: zoom-out;
}

这是我的jQuery：

<script>
$(document).ready(function(){

    $("figure img").addClass("unzoomed");

    $("figure img.unzoomed").click(function(){
        $(this).addClass("zoomed").removeClass("unzoomed");
    });

    $("figure img.zoomed").click(function(){
        $(this).addClass("unzoomed").removeClass("zoomed");
    });

});
</script>