Question

你将不得不原谅一个可能非常基本的问题，因为我仍然在掌握jQuery。

我已经设置了这段代码，以便点击.team-member figure elememt，这是一个名为“overlayOn”的类。添加了一个绝对定位的div与rbga颜色（无论如何我离题）。

这很有效，除了我想要它，以便点击一个元素时它会添加＆＃39; overlayOn＆＃39;上课并禁用其他人。现在我知道这应该是一个简单的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()从所有overlayOn中移除课程.team-member figure，并仅将此课程添加到点击figure：

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

Answer 2

您可以查看点击事件本身内的window.width()。 $('.overlayOn').removeClass('overlayOn');将帮助您从所有元素中删除类名overlayOn。然后，您可以使用overlayOn方法

将.addClass()添加到当前对象

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

jQuery onClick：如何将类添加到元素并从其他所有元素中删除

2 个答案: