javascript - jQuery:在一个元素上切换类，从所有其他元素中删除相同的类

Question

这里是新的，深深希望我没有错过一个愚蠢的语法缺陷。我认为我的问题是一个相当普遍的问题，但不知何故，到目前为止，对我的具体情况没有任何帮助。 有一个简单的图像画廊内联 block 列表，可以缩放以填充父宽度。一旦通过点击子项进行缩放，其他项就应该通过剥离最大化它们的类来取消缩放。仅此而已。 我通过以下 jQuery 实现了第一部分(我认为问题隐藏在 for 循环中):

  $(".zoom").click(function() {
    var target = $(this);
    target.closest('div.product-item').toggleClass('maximized');

    var ot = document.getElementsByClassName('product-item');
    for (var i = 0; i < ot.length; i++) {
      if (ot[i] !== target) {
        ot[i].removeClass('maximized');
      }
    }
  });

因此:单击某个 .zoom 类元素，将其父元素切换为最大化，然后使用 for 循环检查与父元素属于同一类的所有其他元素，并删除 .maximized 类。 使用 for 循环和removeClass 构造脚本的原因是，相同的 .zoom 元素能够最小化其父元素，而不仅仅是最大化它们。

我不是 javascript 专业人士，但据我所知，这原则上应该可行。我在这里遗漏了什么吗？

一年前的这篇文章解决了类似的问题，但对我的情况没有帮助:jQuery onClick: How to add class to element and remove from all others

You can find a pen to see the script in action here.

Answer 1

$(".zoom").on('click',function() {
    var target = $(this);
    $('div.product-item').removeClass('maximized');
    target.closest('div.product-item').toggleClass('maximized');
});

你可以使用

if(target.closest('div.product-item').hasClass('maximized')){
      $('div.product-item').removeClass('maximized');
  }else{
      $('div.product-item').removeClass('maximized');
          target.closest('div.product-item').addClass('maximized');
  }

JSFIDDLE