Jquery使用json数组类名更新css文件属性

Question

https://jsfiddle.net/5vue1buj/9/

我很难弄清楚如何通过jquery用下面列出的值更新css属性：

trials = [
    { 
    values : ["blue", "red", "green", "blue", "yellow"],
    triangle:["triangle-1", "triangle-2","triangle-4","triangle-3","triangle-1"],
    response : [0, 0, 0, 0, 0]
    },
    { 
    values : ["red"......etc],
     etc
    etc
    }
];

css存储在myFile.css中。

我想要做的是每隔5秒(大约)，索引将相应地递增并更新不同的形状。例如，带有.triangle-1的shape将从白色更新为蓝色，然后5秒后triangle-2类的shape将更新为红色，依此类推。当它到达末尾时，因此索引为4，它将暂停(但这不是我正在努力的一部分)。

就像这样

currentIndex = 0;

trials[currentIndex].colors[currentIndex]
currentIndex ++;

获取颜色和className的值，但我不确定如何更新颜色。

Answer 1

最简单的方法就是使用jQuery选择器和css方法。

所以，像下面这样的东西可能会做到这一点，它不是最漂亮的，但它可以让你入门-

var trials = {
    colors : ["blue", "red", "green", "blue", "yellow"],
    classNames: ["1", "2", "3", "2", "4"]
};

TimedChange(trials, 0);

function TimedChange(classColours, iteration)
{
    ChangeClassColour(classColours.className[iteration], classColours.colors[iteration]);

    setTimeout(TimedChange(classColours, iteration + 1), 1000);
}

function ChangeClassColour(className, colour)
{
    // you'd set whatever css styles you need to change
    jQuery("." + className).css({ color: colour, background-color: colour });
}