每个事件后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. 使用Array来保存要循环使用的值，并使用counter来指示要使用的下一个值的位置。

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

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]'; 
}