Question

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

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

我想知道是否可以从除了所选元素之外的每个元素中删除类。

感谢任何帮助！

代码如下：原型：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');
});

Answer 1

您正在调用toggleClass，但不会先删除该类。因此，在某些情况下，它应该在添加类时删除该类。 Toggle将在没有它时添加该类，并在它出现时将其删除。通过确保首先删除该类，它将按预期添加它。但是，此时，toggleClass可能应该被addClass替换，因此它更具可读性。

这是一个有效的例子

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

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

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

我会找到更加明确的方式来做到这一点，但是现在我已经添加了一个变量来跟踪点击了哪个按钮。使用它我们可以清除何时来自不同的按钮，但如果我们点击相同的按钮，我们就不会清除并允许toggleClass切换div。

Edit2：为了好玩，我把它清理成一个功能。 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');
});

Answer 2

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

Answer 3

只需要加强toogleClass功能。如果有更优雅的方式来做这件事会很棒。

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

 })

从每个不是（this）的元素中删除ClassClass

3 个答案: