Выделить интервал=промежуток=цепочк у элементов двумя кликами.
<!doctype html>
<meta charset='utf-8'>
<title>EXAMPLE</title>
<div id='box'>
<div class='el'>1</div>
<div class='el'>2</div>
<div class='el'>3</div>
<div class='el'>4</div>
<div class='el'>5</div>
<div class='el'>6</div>
<div class='el'>7</div>
<div class='el'>8</div>
<div class='el'>9</div>
<div class='el'>X</div>
</div>
<style>
body {
display: flex;
margin: 0;
height: 100vh;
background: #56bddc;
}
#box {
display: flex;
margin: auto;
box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
}
.el {
width: 60px;
line-height: 60px;
font-family: consolas;
font-size: 30px;
text-align: center;
cursor: pointer;
background: #fff;
-webkit-user-select: none;
-moz-user-select: none;
}
.el:hover { background: #fece9a; }
.mark { background: #fece9a; }
</style>
Неужели в JavaScript нет такой конструкции:
(from
a to
b) { ... },
где a - элемент, с которого начинается выделение,
b - элемент, на котором заканчивается выделение.
Итак,
:
Например, требуется выделить интервал элементов со 2 по 7 включительно.
Тогда делаем всего два клика:
1) клик по элементу номер 2;
2) клик по элементу номер 7.
Результат:
2,3,4,5,6,7 элементы изменят свой цвет согласно полученному классу .mark ( см. <style> ).
Тогда алгоритм будет такой:
1) клик по элементу
a:
-> получить номер элемента в контейнере #box;
-> присвоить элементу класс .a;
-> записать номер в
переменную a
2) клик по элементу
b:
-> получить номер элемента в контейнере #box;
-> присвоить элементу класс .b
-> записать номер в
переменную b
3) присвоить элементам от
a до
b класс .mark, пробежавшись по ним циклом
Хотелось бы решить задачу, используя последние фишки
ES6 и желательно обойтись
без массивов.
Цикл
for-of, который может перебирать коллекции элементов, а не только массивы:
http://frontender.info/es6-in-depth-...ikollektsiyami
Попытки, что-то сделать:
Получение номера (индекса) элемента в контейнере:
box.onmouseover = function(e) {
var target = e.target;
target.onclick = function() {
target.classList.add('a');
for (var i = 0; i < box.children.length; i++) {
if (box.children[i] == target) return console.log(i + 1);
}
}
}
Может пригодится:
'use strict'
var i,
j = i + 1,
parent = box,
children = parent.children;
// Вместо children можно использовать элементы от a до b
parent.onmouseover = function() {
for (i of children) {
i.classList.add('mark');
}
}
На Киберфоруме я уже задавал этот вопрос, но ответ получился слишком громоздким. Надеюсь здесь удастся решить иначе.
Если
кому будет интересно, результат должен быть таким:
http://www.cyberforum.ru/post8673990.html
Надеюсь, что вы поможете. Спасибо.
