jQuery onClick:如何向元素添加类并从所有其他元素中删除 [英] jQuery onClick: How to add class to element and remove from all others

问题描述

由于我仍在使用jQuery，您将不得不为一个可能非常基本的问题辩解.

You will have to excuse a probably very basic question as I am still getting to grips with jQuery.

我已经设置了这段代码，以便在单击.team-member图elememt时，添加了一个名为"overlayOn"的类，该类添加了具有rbga颜色的绝对定位的div(无论如何，我都离题了).

I've set up this code so that on click of the .team-member figure elememt, a class called 'overlayOn' is added which adds an absolutely positioned div with an rbga colour (anyway I digress).

这很好用，除了我想要它，以便在单击元素时添加"overlayOn"类并禁用其他元素. 现在我知道这应该是removeClass或toggleClass的简单案例，但是我一生都无法正常工作.烦人的事情是我实际上已经做过，但是这次看不到我要去哪里了.

This works perfectly, except I want it so that on click of an element it adds the 'overlayOn' class and disables the others. Now I know this should be a simple case of removeClass, or toggleClass but I cannot for the life of me get this working. The annoying thing is I have actually done this before but cannot see where I am going wrong this time.

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类的元素以将其从自身中删除，则将无法使用.

Updated: Below is my code from the suggestions given, when clicking on an element now it will remove the class from others but if I want to click on an element with the overlayOn class to remove it from itself it will not work.

我的更新代码如下.

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

推荐答案

您可以检查click事件本身内部的window.width(). $('.overlayOn').removeClass('overlayOn');将帮助您从所有元素中删除类名称overlayOn.然后，您可以使用.addClass()方法将overlayOn添加到当前对象

You can check the window.width() inside the click event itself. $('.overlayOn').removeClass('overlayOn'); will help you to remove a the class name overlayOn from all the elements. Then you can add overlayOn to the current object using .addClass() method

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:如何向元素添加类并从所有其他元素中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！