Question

我是JavaScript的新手，并试图学习做一些功能性的东西。我正在努力让阵列变得更加舒适。在这里，我希望HTML中的onClick循环到EACH数组值（颜色）并为每个<p>设置样式。目前它只是结束，我明白为什么会这样做，但我不知道如何产生我想要的结果。

我的（相关）HTML：

<p id="pg">Hi, this is a string of text.</p>
<button type="button" onclick="change()">Click Me!</button>

我的JS：

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];

function change()
{
    for (i = 0; i < colors.length; i++) {
        x=document.getElementById("pg"); // Find the element
        x.style.color=colors[i];          // Change the style
    }
}

我是否应该为此使用循环？谢谢你的帮助。

Answer 1

此代码中有两个重要部分。第一个是超时，它每秒都会改变颜色。第二个是创建一个闭包，以确保在循环迭代期间传递给setTimeout的函数中颜色变量不会改变。

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];

var timeouts = [];
function change()
{
    clearTimeouts()
    for (i = 0; i < colors.length; i++) {
        var timeout = setTimeout(changeColor(colors[i]), 1000 * i);
        timeouts.push(timeout);
    }
}

function changeColor(color){
    return function(){
        var x=document.getElementById("pg"); // Find the element
        x.style.color=color;
    };
}

function clearTimeouts(){
    for(var i = 0; i < timeouts.length; i++){
        clearTimeout(timeouts[i]);
    }
}

JS小提琴： http://jsfiddle.net/4ryGJ/1

如果您希望仅更改每次点击的颜色

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];

var color = 0;
function change()
{
    color = (color == colors.length -1) ? 0: color;
        x=document.getElementById("pg"); // Find the element
        x.style.color=colors[++color];
}

Answer 2

试试这个：

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];

function change()
{
    setColor(0);
}

function setColor(i) {
    if(i >= colors.length);
        return;

    document.getElementById("pg").style.color = colors[i];

    setTimeout(function() {
        setColor(i + 1);
    }, 1000);
}

您可以更改setTimeout的第二个参数，以决定在再次更改颜色之前等待多少毫秒。

Answer 3

您需要使用下面的全局变量，或者运行循环来查找颜色并获取下一个颜色。这是第一种方法：

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];
var i = 0;

function change()
{
    x=document.getElementById("pg"); 
    x.style.color=colors[i++];
    if(i == colors.length) i = 0;
}

Answer 4

您可以像这样循环颜色：

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];
var i = 0;

function change() {
    var x = document.getElementById("pg");
    x.style.color = colors[i++ % colors.length];
}

http://jsfiddle.net/A2JBL/

需要循环浏览并单独显示每个数组值 - 没有jQuery

4 个答案: