使用 toggleclass 在 3 个类之间切换答案

【问题标题】：Toggle between 3 classes using toggleclass使用 toggleclass 在 3 个类之间切换
【发布时间】：2015-12-07 02:54:45
【问题描述】：

我有 3 张图像要在它们之间切换。我将它们中的每一个放在一个类中并在 css 中更改它的图像。我现在可以在 2 个类之间切换，但是当我添加第三个类时，代码不起作用。他们中的任何一个班级都可以成为起始班级。

    $('.one').click(function(){                             
        $(this).toggleClass("two");
        $(this).toggleClass("one");

    });
     $('.two').click(function(){                             
        $(this).toggleClass("one");
        $(this).toggleClass("two");

    });

当我添加这一行时：

        $(this).toggleClass("three");

它根本不切换....

你知道我可以将它们全部放在一个函数中的方法吗？

谢谢。

【问题讨论】：

您能否举一个实际的例子说明您要完成什么以及想要的结果是什么？
用户有一张X图片，例如绿色，当他点击它时，它应该是黄色的，当他点击它时，它应该是红色的。如果图像已经是红色，它应该是绿色然后黄色，如果他从黄色开始，它应该是红色然后绿色然后黄色......等等。
所以你需要按顺序循环分配课堂作业，对吧？

标签： javascript jquery html toggleclass

【解决方案1】：

小提琴示例：http://jsfiddle.net/KdfEV/

此代码将允许您循环浏览一系列已定义的类

$('.one, .two, .three').click(function() {                             
    this.className = {
       three : 'one', one: 'two', two: 'three'
    }[this.className];
});

【讨论】：

如果我问你这个“[this.className];”有可能吗？使？一切正常，但我不明白它的作用。
它被用作通过对象{ three : 'one', one: 'two', two: 'three' }的键进行查找。例如。当当前类为two 时，此构造将在对象内部查找此键并选择其关联值（三）更改元素的类名

【解决方案2】：

$('.one, .two, .three').click(function(){                             
        $(this).toggleClass("one, two, three");
    });

【讨论】：

谢谢.. 但是当我在这里尝试jsfiddle.net/OnlyHope/qbZ9q/1 它只是切换两个类，第三个呢？

【解决方案3】：

最安全的方法是删除不需要的类并添加所需的类：

// Switch to class 'three'
$(this).removeClass('one').removeClass('two').addClass('three');

【讨论】：