есть блок с элементами, они имеют такие классы попарно '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>
При первом клике добавляйте класс/дата-атрибут к элементу, затем при втором клике ищете элемент с добавленным классом/атрибутом и сравниваете, если не равны, подсвечиваете, и дальше можно кликать; если равны то убираете класс/аттрибут добавленный при первом клике, и т.д по кругу
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Как разбить строку в массив или просто поэлементно взять каждый символ этой строки? Проблемы возникает в том, что строка состоит из букв кириллицыНужно...