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

【问题标题】：Jquery update css file property with json array class namesJquery使用json数组类名更新css文件属性
【发布时间】：2015-04-21 16:13:46
【问题描述】：

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 的形状将从白色更新为蓝色，然后在 5 秒后，triangle-2 类的形状将更新为红色，等等。在它到达末尾，所以索引 4，它会暂停（但那是不是我苦苦挣扎的一部分）。

有点像

currentIndex = 0;

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

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

【问题讨论】：

首先，您有一个语法问题 - 应该是 trial = { ... } 而不是您正在使用的 []。您正在定义一个带有键和属性的对象，而不是一个数组。
@TimMcClure 感谢您发现 Tim - 写错了，刚刚修复
你能提供相关的 HTML 或工作的 jsfiddle 吗？
@TimMcClure 我刚刚添加了一个小提琴并相应地更新了我的问题

标签： jquery css json

【解决方案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 });
}

【讨论】：

我猜应该是classColours.colors[iteration]^^