jquery - addClass 无法正常工作

Question

这是我的代码。我想使用 切换类addClass，由于某些原因我不想使用toggleClass. 我面临的问题selected是添加了名为的 css 类，但它没有被not_selected. isSelected=0只表示td选中与否。

<script type="text/javascript"> 


var isSelected = 0;

$("td").click(function(){
    if(isSelected==0)
    {
        $(this).removeClass('not_selected');
        $(this).addClass('selected');
        isSelected=1;
    }

});

$("td").click(function(){
    if(isSelected==1)
    {
        $(this).removeClass('selected');
        $(this).addClass('not_selected');
        isSelected=0;
    }
});

下面是我的css代码：

.selected
{
    background: black;
    color:white;
    font-weight: bold;
}

.not_selected
{
    background: white;
    color:black;
    font-weight: normal;
}

Answer 1

看看这个小提琴：http: //jsfiddle.net/bukfixart/NYGh5/

问题是您的事件处理程序

$("td").click(function(){
    if(isSelected==0)
    {
        $(this).removeClass('not_selected');
        $(this).addClass('selected');
        isSelected=1;
    } else {
        $(this).removeClass('selected');
        $(this).addClass('not_selected');
        isSelected=0;
    }
});

您应该在一个回调函数中完成所有工作。不在两个。否则，这些功能将相互启用/禁用。

Answer 2

尝试将两者压缩成一个函数。可以保证（感谢 Barmar！）一个处理程序在另一个处理程序之前运行，然后自动将其切换回不需要的处理程序。这样，它会一举检查isSelected==0并检查。isSelected==1

$("td").click(function(){
    if(isSelected==0)
    {
        $(this).removeClass('not_selected');
        $(this).addClass('selected');
        isSelected=1;
    } else if(isSelected==1)
    {
        $(this).removeClass('selected');
        $(this).addClass('not_selected');
        isSelected=0;
    }
});