Question

我正在为学生制作评估系统。我想在老师点击它时改变学生的成绩。我有两个“等级”的图像，我在之间切换：“A”，点击“B”...＆amp;等等。我现在使用一个实现此任务的函数，如下所示：

  function ChangeClass(object) 
          {

            var objectClass = $(object).attr('class');


        if (objectClass == 'zero') {

            $(object).removeClass('zero');
            $(object).addClass('one');

        }
        else if (objectClass == 'one') 
        {

            $(object).removeClass('one');
            $(object).addClass('two');
        }
        else if (objectClass == 'two') {
            $(object).removeClass('two');
            $(object).addClass('zero');
        }
    }

但是我不喜欢这个解决方案，我想Jquery可能会有更简单的东西，或者更改按钮形状或者切换图像的东西。如果您有任何想法，请分享=）

Answer 1

试试这个：

var classes = ["zero", "one", "two"],
    i = classes.indexOf(object.className);
object.className = classes[(i + 1) % classes.length];

不需要jQuery，但请记住，IE8及更低版本不支持indexOf数组，必须模拟它。

我假设object是一个有效的DOM元素。

Answer 2

如果您想在所有浏览器中使用jquery，可以使用它：

       var max = 3; //total button or button class
       function ChangeClass(object){
                              var i = $(object).split('_')[1]; //this will explode 1 from className_1
                              var a = "className_" + i; // instead of zero, one, two use className_1, className_2, className_3
                              var b = (i+1) % max;
                              b = "className_" + b;
                              var x = "." + a;
                              $(x).click(function(){  
                                   $(this).removeClass(a).addClass(b);
                                });  
                              }

您可以将此解决方案用于任意数量的按钮，不仅适用于3个按钮 - 零，一，二。我希望这会有所帮助！

单击时更改按钮形状

2 个答案: