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');
});