изменение цветов по клику

300
05 ноября 2017, 19:49

есть блок с элементами, они имеют такие классы попарно 'box 1' - 2 шт., 'box 2' - 2 шт, и тд, по клику они меняют цвет таким образом, клик по первому эл-ту окрашивает в синий(допустим), клик по второму эл-ту должен сравнить свой класс с эл-том предыдущего клика, и если они равны окрасить оба в зеленый, если нет окрасить оба в красный(на мгновение) и вернуть в первоначальное состояние, повторного клика по правильно окрашенным блокам бытьжно. я застопорился на сравнении, не знаю как записать данные из первого и второго клика в переменную пример кода

    <style>
div.box {
    margin: 30px;
    border:1px #2E2E2E solid;
    text-align:center;
    padding:10px 0px;
    width:100px;
    background-color:#A04B22
}
.left {
    position:absolute;
    left: 150px;
}
</style>
<div class="left">
    Clicked : <b id="res">0</b>
</div>
<div id="col-box">
    <div class="box 1"><p>hello</p></div>
    <div class="box 1">hello</div>
    <div class="box 2">hello</div>
    <div class="box 2">hello</div>
    <div class="box 3">hello</div>
    <div class="box 3">hello</div>
    <div class="box 4">hello</div>
    <div class="box 4">hello</div>
    <div class="box 5">hello</div>
    <div class="box 5">hello</div>
    <div class="box 6">hello</div>
    <div class="box 6">hello</div>
</div>
<script>
var boxes = document.getElementById('col-box');
var selectedBox;
boxes.onclick = function (event) {
        var target = event.target;
    //var targetClassBox = className
    while (target != this) {
        if(target.className.split(' ')[0] == 'box') {
            highlight(target);
            return;
        }
        target = target.parentNode;
    }
}
  var currentCount = 0;
    function highlight(node) {
        counter = makeCounter();
        counter();
        selectedBox = node;
        selectedBox.style.backgroundColor = 'blue';
        if(currentCount > 2) {
            currentCount = 1;
            if(currentCount == 1) {
            selectedBox.style.backgroundColor = 'blue';
              var tarClass1 = selectedBox.className;
            } else if(currentCount == 2) {
            selectedBox.style.backgroundColor = 'blue';
              var tarClass2 = selectedBox.className;
            }
            if (tarClass1 == tarClass1){//оба undefined
            selectedBox.style.backgroundColor = 'green';
            } else {
            selectedBox.style.backgroundColor = 'red';
            }
        }

        console.log('click №' + ' ' + currentCount);
        console.log('tarClass1 - ' + tarClass1 + 'tarClass2 - ' + tarClass2)
    }

function makeCounter() {
  //var currentCount = 1;
  return function() {
    return currentCount++;
  };
}
</script>
Answer 1

При первом клике добавляйте класс/дата-атрибут к элементу, затем при втором клике ищете элемент с добавленным классом/атрибутом и сравниваете, если не равны, подсвечиваете, и дальше можно кликать; если равны то убираете класс/аттрибут добавленный при первом клике, и т.д по кругу

READ ALSO
Как заменить forEach() на map()?

Как заменить forEach() на map()?

Помогите пожалуйста переписать кусочек кода:

231
Принять JSON на стороне JS

Принять JSON на стороне JS

Добрый деньВозникла такая проблема

250
Как разбить строку из латиницы и кириллицы посимвольно в массив?

Как разбить строку из латиницы и кириллицы посимвольно в массив?

Как разбить строку в массив или просто поэлементно взять каждый символ этой строки? Проблемы возникает в том, что строка состоит из букв кириллицыНужно...

290