jQuery：在一个元素上切换类，从所有其他元素上删除类

Question

new here and deeply hoping I'm not missing a stupid syntax flaw. I was thinking that my problem is a fairly common one, but somehow nothing has helped so far in my specific case. There is a simple inline-block list of Image Galleries which are zoomable to fill the parent width. As soon as one is zoomed through click on a child, the others should unzoom by stripping of the class which maximizes them. Nothing more to it. I achieved the first part via the following jQuery (where the problem is hidden in the for-loop, I think):

  $(".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'); } } }); 

So: Some .zoom classed element is clicked, its parent is toggled to maximize and a for loop checks all other elements of the same class as the parent and removes the .maximized class. The reason the script is constructed with a for-loop and a removeClass is so that the same .zoom elements are able to minimize their parent elements, not only to maximize them.

Im not a javascript professional, but to my knowledge this should work in principle. Am I missing anything here?

This post from a year ago addressed a similar problem but didn't help in my case: 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');
});

you can use

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