互斥图像

Question

我想要一组图像，其中一次只展开一个图像。其他的将缩小到自然尺寸的10％。通过点击事件，我希望能够选择单个图像，此时选择的另一张照片将缩小回10％。

<script>      //To expand an image back to full size
    $(document).ready(function(){
        $("img").click(function(){
            $(this).css("width","100%");
        });
    });
</script>

如果没有为每张图片提供唯一的ID并花费大量时间来缩减其他图片，我将如何使图片完全缩小尺寸？

对于那些想要查看HTML的人：

<div>
    <img class="shrink thick-border" src="img/bentley.jpg">
</div>
<div>
    <img class="shrink thick-border" src="img/classic.jpg">
</div>
<div>
    <img class="shrink thick-border" src="img/ferrari.jpg">
</div>
<div>
    <img class="shrink thick-border" src="img/maseratti.jpg">
</div>

Answer 1

你可以创建一个宽度为100％的css类，你可以在点击img时添加和删除

<强> CSS ：

.maxSize{
    width:100%;
}

<强> JS

 $("img").click(function(){
            $("img").removeClass('maxSize')
            $(this).addClass('maxSize');
        });

<强> Fiddle

Answer 2

使用以下内容：

$(document).ready(function(){
    $("img").click(function(){
        $('img').each(function(){$(this).css('width', '10%');});
        $(this).css("width","100%");
    });
});