jQuery | 点击添加/删除课程| 最佳实践

Question

今天，我不得不为画廊设置许多图像。 在该网站的移动版本上，我不得不堆叠图像，因为不可能连续显示4张图像。

但是，对于移动视图而言，图像非常高（350像素），因此我决定将其缩小到100像素的高度，并使其可单击以扩展到整个高度。

我只是通过添加或删除一个名为“ extended”的类来做到这一点，该类将高度再次设置为350px。

我用于此的JavaScript可以运行，但是我不确定这是否是您所说的最佳实践，或者它是否可以更轻松地实现：

$('.galery__img--fragrance').on('click', function() {
    if($(this).hasClass('extended')) {
      $(this).removeClass('extended');
    } else {
      $(this).parent().find('.extended').removeClass('extended');
      $(this).addClass('extended');
    }
  });

我希望这个问题不是多余的，但是我对JS / jQuery很陌生，我想做对了:-)

编辑：也许我应该提到过，如果再次单击图像或单击其他图像，我想使图像折叠到100px的高度

Answer 1

使用.toggleClass()函数可同时添加/删除类：

$('.galery__img--fragrance').on('click', function() {
    $(this).toggleClass('extended');
});