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

这样的一般过程是：

使用Array保存要循环的值，并使用counter指示要使用的下一个值的位置。
当您需要应用值时，请使用Array作为索引从counter中提取值。
使用值后，递增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]';
}

每次活动后javascript都会改变颜色

1 个答案: