为什么不在jQuery中切换类？

我画了一个小草图来测试我的知识。我想通过点击td元素来更改类

我添加了一个基本类，然后使用toggleClass（）进行更改。不幸的是，它不起作用

$( function() {
    $('td').addClass("grey-cell");

    $('td').click( function() {
        if($(this).hasClass("grey-cell"))
            $(this).toggleClass("red-cell");
        if($(this).hasClass("red-cell"))
            $(this).toggleClass("blue-cell");
        if($(this).hasClass("blue-cell"))
            $(this).toggleClass("green-cell");
        if($(this).hasClass("green-cell"))
            $(this).toggleClass("grey-cell");
    });
});

---

让我们从逻辑上遵循它：

$(function() {
    $('td').addClass("grey-cell");

    $('td').click(function() {
        if ($(this).hasClass("grey-cell"))
            $(this).toggleClass("red-cell");
        if ($(this).hasClass("red-cell"))
            $(this).toggleClass("blue-cell");
        if ($(this).hasClass("blue-cell"))
            $(this).toggleClass("green-cell");
        if ($(this).hasClass("green-cell"))
            $(this).toggleClass("grey-cell");
    });
});

当您单击一个单元格时，它将有

灰色单元格

，因此您可以打开

红色单元格

。然后，在下一行，您可以看到它是否有

红细胞

（它会），如果有，您可以打开

蓝细胞

。然后对蓝色/绿色执行相同的操作，然后对绿色/灰色执行

操作

因此，在第一次单击后，
td
有
红细胞蓝细胞绿细胞
，没有
灰细胞

我猜你是有意的

A） 使用
else
以便只遵循一条路径，并且

B） 关闭它拥有的上一个类

例如：

请注意，当我们知道它有（比如）灰色单元格时，我们如何在
切换类中包含
灰色单元格
，因此在添加
红色单元格时将其删除。等等


$（函数（）{
$（'td'）.addClass（“灰色单元格”）；
$（'td'）。单击（函数（）{
var td=$（本）；
if（td.hasClass（“灰色单元”））{
td.toggleClass（“灰细胞红细胞”）；
}else if（td.hasClass（“红细胞”））{
td.toggleClass（“红细胞-蓝细胞”）；
}else if（td.hasClass（“蓝色单元格”））{
td.toggleClass（“蓝细胞-绿细胞”）；
}else if（td.hasClass（“绿色单元格”））{
td.toggleClass（“绿色单元格-灰色单元格”）；
}
});
});
。灰色单元格{
背景颜色：灰色；
颜色：白色；
}
.红细胞{
背景色：红色；
颜色：白色；
}
.蓝色电池{
背景颜色：蓝色；
颜色：白色；
}
.绿色细胞{
背景颜色：绿色；
颜色：白色；
}

点击我
您无需使用复杂的
if-else
。按所需顺序创建类的数组。然后单击
td
根据数组顺序更改类。如果到达数组的最后一项，则返回到第一项

$(function() {
    $('td').addClass("grey-cell");
    var classes = ['grey-cell', 'red-cell', 'blue-cell', 'green-cell'];
    var total = classes.length;

    $('td').click(function () {
        var cls = $(this).attr('class');

        //if you have other classes then take last class
        //var arr = $(this).attr('class').split(' ');
        //var cls = arr[arr.length];

        var index = classes.indexOf(cls);
        index = (index + 1) % total;

        $(this).removeClass(cls).addClass(classes[index]);
    });
});

您的代码最后将返回灰色单元格类，因为您需要使用return false；在每个if条件之后，或使用if、elseif和else。。为了获得适当的结果。。谢谢..检查T.J.Crowder和这把小提琴的答案也是个好主意，但最好不要只使用
索引检查
，因为（比如）一个
彩色单元格将混淆该检查。另外，仅供参考，您可以使用
index
rollover技巧：
index=（index+1）%classes.length
$(function() {
    $('td').addClass("grey-cell");
    var classes = ['grey-cell', 'red-cell', 'blue-cell', 'green-cell'];
    var total = classes.length;

    $('td').click(function () {
        var cls = $(this).attr('class');

        //if you have other classes then take last class
        //var arr = $(this).attr('class').split(' ');
        //var cls = arr[arr.length];

        var index = classes.indexOf(cls);
        index = (index + 1) % total;

        $(this).removeClass(cls).addClass(classes[index]);
    });
});