单击另一个.grid-item

Question

我正在使用砖石结构，当我单击网格项目时，将向该项目添加一个类grid-gigante类。问题是，当我单击其他网格项目时，类grid-item--gigante被添加到了新单击的项目中，但并未从上一个项目中删除。

这是一支电笔

https://codepen.io/desandro/pen/rLdLdB

我试图从具有gigante类的项目中删除该类

<div class="grid row">
            <div class="grid-item">
                <img src="/_catalogs/masterpage/V6/img/phishing_1.png" />
             </div>
  </div>


<script type="text/javascript">
    var $grid = $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: 100,
            isFitWidth: true,
            gutter: 7,
            stagger: 30
        });

    $grid.imagesLoaded().progress( function() { 
        $grid.masonry('layout');
    })
    $grid.on('click', '.grid-item', function () {
        // change size of item via class
        $(this).toggleClass('grid-item--gigante');
        // trigger layout
        $grid.masonry();
    });
    </script>

我希望将类添加到被单击的项目中，但是当您单击其他项目时，该类将被添加到新的被单击项目中，但已从上一个被单击的项目中删除。