0

3 つの要素があります。最初にクリックした要素を変更する必要があります。たとえば、赤に変更します。どの要素がクリックされても。2 番目にクリックされた要素が緑色に変わり、最後にクリックされた要素が青色に変わる必要があります。これらの要素をもう一度クリックすると、白に戻る必要があります。

最初の要素は問題ではありませんが、他の要素を変更するにはどうすればよいですか?

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
4

1 に答える 1

1

このようなものの一般的なプロセスは次のとおりです。

  1. a を使用Arrayして循環させたい値を保持し、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]';
}
于 2013-07-28T13:43:02.763 に答える