Jquery - 试图隐藏和显示一堆图像

Question

我的jquery代码有点问题。我是Jquery的新手，所以请帮我改进我的代码。好吧，我试图隐藏并显示这4张图片。让我详细说明一下：

1. 我创建了这4张图片（并排放置）
2. 点击它时，它应该展开并隐藏另一个
3. 展开点击后，它应返回正常尺寸并显示其他
4. 然后应该重复

我的代码似乎在第一次运行时起作用，但它在第二次运行时会混乱（图像的行为与我设想的行为不同）

这是我的代码： http://codepen.io/sallyiee/pen/onkKs

Answer 1

您可以使用toggleClass和toggle元词来简化代码：

$(".showcase" ).on("click", "img", function(e) {
    $(this).toggleClass("expand");
    $(this).siblings().toggle("fast"); 
});

演示：http://codepen.io/anon/pen/mlBEI

Answer 2

尝试

$(".showcase img" ).click(function(e) {
    if( $(this).hasClass('expand')) {
      $(this).removeClass("expand").addClass("normal").show("fast");
      $(this).siblings().show("fast");
    } else {
      $(this).addClass("expand").removeClass("normal");
      $(this).siblings().hide("fast");
    }
  });

http://codepen.io/tamilcselvan/pen/HpbiK