Чтобы менялся цвет у той ячейки, на которую кликнули (а у остальных удалялся)
При клике на ячейку у нее меняется цвет (добавляется класс).
Как сделать чтобы цвета у других ячеек исчезали (если они есть), а цвет менялся только у той ячейки, на которую кликнули? https://codepen.io/yaparoff/pen/MWYbWMV |
Цитата:
<style type='text/css'>
.cell {
width: 80px;
height: 60px;
border: 1px solid #000;
cursor: pointer;
}
.row {
display: flex;
}
.on {
background-color: red;
}
</style>
<div class="row">
<div class="cell" data-sort='0'></div>
<div class="cell" data-sort='0'></div>
<div class="cell" data-sort='0'></div>
</div>
<script type='text/javascript'>
var o=document.getElementsByClassName('row');
o[0].addEventListener('click',function(e){
var oc=e.target.classList;
if (oc.contains('cell')) {
var el=e.target.parentNode.querySelectorAll('.cell.on')
for (var i=0; i<el.length; i++) {
el[i].classList.remove('on');
};
oc.add('on');
};
});
</script>
|
ksa, чтобы не перебирать постоянно ячейки, коих может быть много, можно делегировать обработку родителю, в который записывать объект активный, при щелчке по другому объекту у сохраненного удаляется класс.
|
Цитата:
|
делегирование зависимые клики
yaparoff,
на основе варианта от Malleys
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
width: 80px;
height: 60px;
border: 1px solid #000;
cursor: pointer;
background-color: var(--bg-color, '')
}
.row {
display: flex;
margin: 20px auto;
}
</style>
<script>
const classNames = ['', 'yellow', 'red'];
document.addEventListener("click", event => {
const cell = event.target.closest(".row > .cell");
if(cell) {
const root = cell.parentNode;
if(root._lastCell) root._lastCell.style.setProperty('--bg-color', '');
if(root._lastCell != cell) root._current = 0;
root._current = (root._current + 1) % classNames.length;
root._lastCell = cell;
root._lastCell.style.setProperty('--bg-color', classNames[root._current])
}
});
</script>
</head>
<body>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</body>
</html>
|
В общем ни одно из решений не подошло. Написал сам то что мне нужно.
https://codepen.io/yaparoff/pen/MWYbWMV Всем спасибо! |
yaparoff, я тебе пример показал, а не решение... :D
|
yaparoff,
посмотрите пост #5 снова. |
| Часовой пояс GMT +3, время: 18:41. |