javascript - javascript在每个事件后改变颜色

Question

我有三个元素，单击的第一个元素需要更改，比如说红色。无论点击什么元素。单击的第二个元素需要变为绿色，然后单击的最后一个元素需要变为蓝色。第二次单击这些元素时，它们需要变回白色。

第一个元素不是问题，但我该如何继续更改其他元素？

css

    .container {
        background-color: #ffffff;
        border: 1px solid blue;
        border-radius: 10px;
        width: 100px;
        height: 50px;
    }   
    .red { background-color: #ff0000; }
    .green { background-color: #00ff00; }
    .blue { background-color: #0000ff; }

html

<div class='container' id='1' onclick='changeColor(1);'></div>
<div class='container' id='2' onclick='changeColor(2);'></div>
<div class='container' id='3' onclick='changeColor(3);'></div>

javascript

function changeColor(whichOne)
{
    var element = document.getElementById(whichOne);
    if ( whichOne == 1 || whichOne == 2 || whichOne == 3 )
    {
        element.classList.toggle("red");
    }

}//end 

Answer 1

这样的事情的一般过程是：

1. 使用 anArray保存要循环的值，并使用 acounter指示要使用的下一个值的位置。

2. 当您需要应用一个值时，将其从Array用作counter索引。

3. 使用一个值后，递增 以counter指示 中的下一个值Array。如果counter已到达 末尾Array，请将其重置回0。

这是一个例子：

var valuesToUse = ['classA', 'classB', 'classC'],
    nextIndex = 0;

function applyValue(target) {
    var value = valuesToUse[nextIndex];
    nextIndex = (nextIndex + 1) % valuesToUse.length;

    // use `value` on `target`
}

这是通过循环遍历类名或通过 JavaScript 中的颜色值应用于您的问题的这个想法。

http://jsfiddle.net/teTTR/1/

var colors = ['#ff0000', '#00ff00', '#0000ff'],
    nextColor = 0;

var classes = ['red', 'green', 'blue'],
    nextClass = 0;


var elms = document.querySelectorAll('.color-changer'),
    len = elms.length,
    i = 0;

for (; i < len; i++) {
    elms[i].addEventListener('click', changeColor);
}


elms = document.querySelectorAll('.class-changer');
len = elms.length;
i = 0;

for (; i < len; i++) {
    elms[i].addEventListener('click', changeClass);
}


function changeClass(event) {
    var elm = event.currentTarget,
        currentClass = hasClass(elm, classes);

    if (currentClass) {
        elm.classList.remove(currentClass);
    } else {
        elm.classList.add(classes[nextClass]);
        nextClass = (nextClass + 1) % classes.length;
    }
}


function changeColor(event) {
    var element = event.currentTarget;
    if (element.style.backgroundColor) {
        element.style.backgroundColor = '';
    } else {
        element.style.backgroundColor = colors[nextColor];
        nextColor = (nextColor + 1) % colors.length;
    }
}


function hasClass(elm, classes) {
    var len,
        i;
    if (isArray(classes)) {
        len = classes.length;
        i = 0;
        for (; i < len; i++) {
            if (elm.classList.contains(classes[i])) {
                return classes[i];
            }
        }
        return false;
    }
    return elm.classList.contains(classes) ? classes : false;
}


function isArray(item) {
    return Object.prototype.toString.call(item) === '[object Array]';
}