jQuery onClick：如何向元素添加類並從所有其他元素中刪除

Question

當我仍在使用jQuery時，您將不得不為一個可能非常基本的問題辯解。

我已經設置了這段代碼，以便在單擊.team-member圖elememt時，添加一個名為“ overlayOn”的類，該類將添加具有rbga顏色的絕對定位的div（無論如何，我都題外話）。

這很完美，除了我想要它，以便在單擊某個元素時添加“ overlayOn”類並禁用其他元素。 現在我知道這應該是removeClass或toggleClass的簡單案例，但是我一生都無法正常工作。 煩人的事情是我之前實際上已經做過，但是這次看不到我要去哪里了。

jQuery(document).ready(function() {
// Store the references outside the event handler
 var $window = jQuery(window);
 var $memberItem = ".team-member figure";
 function checkWidth() {
    var windowsize = $window.width();
    console.log(windowsize);
    if (windowsize < 768) {
        // if the window is smaller than 768px then allow click to see overlay
      jQuery($memberItem).click(function(event) {
                event.preventDefault();
                jQuery(this).toggleClass('overlayOn');
      });
  }
}

// Execute on load
checkWidth();

// Bind event listener
jQuery(window).resize(checkWidth);

}）;

更新：以下是我給出的建議中的代碼，當單擊一個元素時，它將從其他元素中刪除該類，但是如果我想單擊帶有overlayOn類的元素，將其從其自身中刪除，則將不起作用。

我的更新代碼如下。

jQuery(".team-member figure").click(function (event) {
  var $window = jQuery(window);
  var windowsize = $window.width();
  if (windowsize < 768) {
      event.preventDefault();
      $('.team-member figure').removeClass('overlayOn');
      $(this).toggleClass('overlayOn');
  }
});

Answer 1

您可以使用.removeClass()從所有.team-member figure刪除類overlayOn ，僅將此類添加到單擊的figure ：

jQuery($memberItem).click(function(event) {
    event.preventDefault();
    jQuery('.team-member figure').removeClass('overlayOn');
    jQuery(this).toggleClass('overlayOn');
});

Answer 2

您可以檢查click事件本身內部的window.width() 。 $('.overlayOn').removeClass('overlayOn'); 將幫助您從所有元素中刪除類名稱overlayOn 。 然后，您可以使用.addClass()方法將overlayOn添加到當前對象

jQuery(".team-member figure").click(function (event) {
    var windowsize = $window.width();
    if (windowsize < 768) {
        event.preventDefault();
        $('.overlayOn').removeClass('overlayOn');
        $(this).addClass('overlayOn');
    }
});

編輯

    jQuery(".team-member figure").click(function (event) {
  var $window = jQuery(window);
  var windowsize = $window.width();
  if (windowsize < 768) {
      event.preventDefault();
      $('.overlayOn').not(this).removeClass('overlayOn');
      $(this).toggleClass('overlayOn');
  }
});