切换图像与另一个图像是相同的位置

Question

我有2张图片。当我点击图片时，它应该显示不同的内容。现在我还希望当我点击默认图像时，也可以将图像放在默认图像与另一个图像相同的位置，这适用于第一个图像和第二个图像。

我有这段代码：https://jsfiddle.net/xsywzLp9/

<div class="imagecontainer">
    <div class="img image1" content="content1">
        <img src="https://pixabay.com/static/uploads/photo/2010/11/24/autumn-1_640.jpg" alt="Mountain View" style="width:250px;">
    </div>
    <div class="img image2" content="content2">
        <img src="https://pixabay.com/static/uploads/photo/2015/06/25/17/23/landscape-821573_640.jpg" alt="Mountain View" style="width:250px;">
    </div>
</div>

<div class="contentcontainer">
    <div class="content content1">
        image content 1
    </div>
    <div class="content content2">
        image content 2
    </div>
</div>

我怎样才能做到这一点？

Answer 1

不确定这是否是您正在寻找的，但您可以将这两个图像包装在div中： 编辑：https://jsfiddle.net/xsywzLp9/49/

$(".img").click(function(){
    $(".content").hide();
    $("."+$(this).attr("content")).fadeToggle(true);
    if ($('div').hasClass('image1')){
       $('.image1 img[alt="Mountain View"]').hide();
    }
});

检查jsfiddle。