通过类名和JS数组更改背景

Question

我试图让它在它需要的地方工作:删除当前类(当前数组值)并添加下一个类(下一个数组值)。

本质上就是这样。

    var myFunction= function (step) {
        if (lastEntered === step) {
            triggerEvent(step, "impress:stepleave");
            lastEntered = null;
 // Adding in an array of gradients 
var i;
var bg = new Aray();
bg[0] = "gradient-0";       
bg[1] = "gradient-1";       
bg[2] = "gradient-2";               
bg[3] = "gradient-3";       
bg[4] = "gradient-4";       
bg[5] = "gradient-5";                   
bg[6] = "gradient-6";       
bg[7] = "gradient-7";       
bg[8] = "gradient-8";                   

            for (i=0;i<bg.length;i++)
            {
            body.classList.add(bg[i]);
            }
        }
    };

在放置body.classList.add("gradient-1");的地方，它只改变了颜色一次，而不影响脚本的其余部分。

谢谢!

Answer 1

首先，定义数组的一个更好的做法是：

var bg = ["gradient-0", "gradient-1", "gradient-0", you get the idea...];

你到底想做什么？

每次调用classNames时，代码都会将所有9个yourFunction添加到body中。

您可以使用classList的remove方法来删除className。

它是否取决于className主体应该拥有的步骤的值？

你可以这样做：

body.className = bg[step];

这将移除身体的所有classNames，并给予它className bgstep；

或者，如果身体的classNames与bg中的不同，那么您可以这样做：

var i = 0, len = bg.length;
for ( ; i<len; i++) {
  if (i === step) { body.classList.add(bg[i]);
  } else {
    if (body.classList.contains(bg[i]) { body.classList.remove(bg[i]); }
  }
}

希望我能提供帮助，但我不太确定步骤是什么，您的函数应该做什么;}