从每个不是(这个）的元素中删除类

RemoveClass from every element that's not (this)

本文关键字：元素 删除 这个      更新时间：2023-09-26

在我的原型中，我有一个控制器，有三个按钮控制三个div。 每个按钮都设置为不同的jQuery选择器，all，eq，even。

一切似乎都运行良好，但是当我从一个切换选项过渡到另一个选项时，上一个选择将延续到下一个选项，而不是从头开始完全重置。 如果我添加一个函数来重置所有div，我的div 不会切换。

我想知道是否有办法从除所选元素之外的每个元素中删除 Class。

感谢任何帮助！

代码如下：这里的原型：http://jsfiddle.net/terra823/L63e3mjL/4/

function clearAll() {
    $('#controller .button').removeClass('theSelected');
}

$('#one').on('click', function () {
    clearAll();
    $('.littleDiv*').toggleClass('theHighlighted');
    $(this).toggleClass('theSelected');
});

$('#two').on('click', function () {
    clearAll();
    $('.littleDiv:eq(1)').toggleClass('theHighlighted');
    $(this).toggleClass('theSelected');
});

$('#three').on('click', function () {
    clearAll();
    $('.littleDiv:even').toggleClass('theHighlighted');
    $(this).toggleClass('theSelected');
});

demo 

function clearAll() {
    $('#controller .button').removeClass('theSelected');
}

$('#one').on('click', function () {
    clearAll();
    $('.littleDiv').removeClass('theHighlighted').eq(0).addClass('theHighlighted');
    $(this).addClass('theSelected');
});

$('#two').on('click', function () {
    clearAll();
    $('.littleDiv').removeClass('theHighlighted').eq(1).addClass('theHighlighted');
    $(this).addClass('theSelected');
});

$('#three').on('click', function () {
    clearAll();
    $('.littleDiv').removeClass('theHighlighted').eq(2).addClass('theHighlighted');
    $(this).addClass('theSelected');
});

只需要加强toogleClass函数。 如果有更优雅的方式来做到这一点，那就太好了。

 $("#one").click(function(){
 $(this).toggleClass('theHighlighted');
 if($("#one").hasClass('theHighlighted')){
     $(this).removeClass('theHighlighted');
  }
 $(this).toggleClass('theSelected');
 if($("#one").hasClass('theSelected')){
     $(this).removeClass('theSelected');
  }
 })

您正在调用 toggleClass，但不首先删除该类。因此，在某些情况下，当它应该添加类时，它会删除该类。切换将在没有类时添加类，并在有类时将其删除。通过确保首先删除类，它将按预期添加它。不过，在这一点上，toggleClass 可能应该替换为 addClass，这样它就更具可读性。

这是一个工作示例

http://jsfiddle.net/L63e3mjL/9/

function clearAll() {
    $('#controller .button').removeClass('theSelected');
    $('.theHighlighted').removeClass('theHighlighted');
}

使用新要求进行编辑：http://jsfiddle.net/L63e3mjL/19/

我将找到一种更电子的方法来执行此操作，但现在我添加了一个变量来跟踪单击了哪个按钮。使用它，我们可以在来自不同按钮时清除，但是如果我们单击相同的按钮，则不会清除并允许 toggleClass 切换div。

编辑2：只是为了好玩，我把它清理成一个函数。 http://jsfiddle.net/L63e3mjL/21/

var current;
var buttons = $('.button');
buttons.click(function(e){
    var button =  $(this);
    var index = button.index();
    var divs;
    if(current != index) clearAll();
    current = index;
    if(index == 0) divs = $('.littleDiv*');
    else if(index == 1) divs = $('.littleDiv:eq(1)');
    else if(index == 2) divs = $('.littleDiv:even');
    divs.toggleClass('theHighlighted'); 
    button.addClass('theSelected');
});
相关文章：