使用toggleclass在3个类之间切换

时间:2012-06-05 08:52:04

标签: javascript jquery html toggleclass

我想要切换3张图片。 我把他们每个人都放在一个班级和在css中更改它的图像。 我现在可以在两个类之间切换,但是当我添加第三个类时,代码不起作用。 它们中的任何一类都可以作为起始类。

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

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

    });

当我添加这一行时:

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

根本没有切换....

你知道一种方法可以将所有这些方法放在一个函数中吗?

感谢。

3 个答案:

答案 0 :(得分:13)

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

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

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

答案 1 :(得分:4)

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

答案 2 :(得分:0)

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

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