|
|
16.12.2019, 11:39
|
|
Кандидат Javascript-наук
|
|
Регистрация: 26.04.2016
Сообщений: 106
|
|
|
Чтобы менялся цвет у той ячейки, на которую кликнули (а у остальных удалялся)
При клике на ячейку у нее меняется цвет (добавляется класс).
Как сделать чтобы цвета у других ячеек исчезали (если они есть), а цвет менялся только у той ячейки, на которую кликнули?
https://codepen.io/yaparoff/pen/MWYbWMV |
|
16.12.2019, 12:34
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от yaparoff
|
|
Как сделать чтобы цвета у других ячеек исчезали (если они есть), а цвет менялся только у той ячейки, на которую кликнули?
|
Как вариант...
<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>
|
|
16.12.2019, 13:22
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
ksa, чтобы не перебирать постоянно ячейки, коих может быть много, можно делегировать обработку родителю, в который записывать объект активный, при щелчке по другому объекту у сохраненного удаляется класс.
|
|
16.12.2019, 14:02
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от laimas
|
|
чтобы не перебирать постоянно ячейки, коих может быть много, можно
|
Я "перебираю" только нужные мне. Ничего лишнего.  |
|
16.12.2019, 14:45
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
делегирование зависимые клики
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>
Последний раз редактировалось рони, 17.12.2019 в 14:45.
|
|
17.12.2019, 14:42
|
|
Кандидат Javascript-наук
|
|
Регистрация: 26.04.2016
Сообщений: 106
|
|
В общем ни одно из решений не подошло. Написал сам то что мне нужно.
https://codepen.io/yaparoff/pen/MWYbWMV
Всем спасибо! |
|
17.12.2019, 14:44
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
yaparoff, я тебе пример показал, а не решение...
|
|
17.12.2019, 14:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
yaparoff,
посмотрите пост #5 снова.
|
|
|
|
