Question

I m working on an evaluation system for students. I want to change the grade of the student when the teacher clicks on it. I have 2 "grade" images that I switch between like that: "A" , after click "B" ... & so on. I now use a function that achieves this task, as follows:

  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 );
        }
    }

But I don t like this solution, I guess there might be something easier in Jquery or something to change the buttons shape, or switch images with. If you have any ideas, please share them =)

Answer 1

尝试此 :

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

s 不需要 jQuery, 但请注意, 数组的 < code> indexof 没有得到 IE8 的支持, 且不那么低, 必须效仿。

我假定 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 个按钮零, 1, 2个按钮。我希望这会有用!

友情链接