Цитата:
|
destus,
На данном этапе ie обходим стороной. EDGE - не имею ничего против ) |
рони,
5-7 строк. Увы не смогу осилить. math.min() вижу первый раз. Плюс ко всему, я вообще поразился тому, как вам удается так сокращать код. Уменя работают только простейшие скрипты, такие как добавить/удалить класс; добавить обработчики, изменить стили, вывести алерт в конце концов :lol: А при попытке усложнить, добавить функционал - все катится к чертям. А когда есть хоть какой-то работающий прототип, появляется и мотивация. На данный момент я изучаю совр. учебник JavaScript Кантора. Поэтому прошу вас, не только предложить решение, но и объяснить принцип действия. Вот здесь выделение следует за курсором после клика, но код уж больно громоздкий. https://jsfiddle.net/e5cbuoxf/7/ |
Цитата:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <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; user-select: none; -moz-user-select: none; } .el:hover { background: #fece9a; } .mark { background: #fece9a; } .blue, .blue:hover{ background: #0000FF; } </style> <script> window.addEventListener("DOMContentLoaded", function() { function d(b, c, d) { [].forEach.call(a, function(e, a) { (a >= c && a <= d || void 0 === c) && e.classList[void 0 === c ? "remove" : "add"](b) }) } var a = document.querySelectorAll(".el"), b = void 0; [].forEach.call(a, function(a, c) { a.addEventListener("mouseover", function() { if (void 0 !== b) { var a = Math.min(c, b), e = Math.max(c, b); d("blue"); d("blue", a, e) } }); a.addEventListener("click", function() { if (void 0 === b) b = c, d("mark"), d("blue", b, b); else { var a = Math.min(c, b), e = Math.max(c, b); b = void 0; d("blue"); d("mark", a, e) } }) }) }); </script> </head> <body> <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> </body> </html> |
Если хочется ES6, то
как говорит рони, для медитации :D Symbol.iterator и nextElementSibling. |
Lemme, Но позволит ли это сократить код? )
Блин, мне больше ничего не надо. Давайте добьем эту тему. Конечно кто я такой, всего лишь Teamur. Думаю тема вполне интересна - ВЫДЕЛЕНИЕ ДИАПАЗОНА (не в обиду другим темам). Медитация тоже не помешает. Наше дело правое и тд, за Родину! Я просто минималист и перфекционист. Так уж вышло. Поэтому не успокоюсь пока не получу компактное и быстрое! Да сейчас я мало что умею делать на JavaScript. Но не могу бросить. Надо сделать! Если что-то смогу сочинить я здесь выложу. Буду держать тему на плаву. Какие еще варианты будут? ))))))) |
рони,
я благодарен вам, за внимание к теме. Спасибо. замечательное решение. Есть ли еще варианты. Хочу увидеть максимальное количество решений. Даже если посмотреть все мои темы можно заметить, что все они сводятся к одному - выделение интервала. Хоть я пока слаб в Javascript, я стремлюсь максимально четко сформулировать задачу, выкладываю фрагменты кода, которые можно использовать, но со сборкой этих фрагментов в единое целое у меня проблема. Спасибо |
Teamur,
сейчас код 30 строк можно сократить строк на 10 ... но всё уже пас ... и лучше наоборот добавить эти 10 с недостающим сейчас функционалом. |
рони,
Если кликнуть первый раз, отвести курсор и не нажимать второй раз, а затем спустить курсор за контейнер #box, мы увидим синюю область. Как сделать так, чтобы при покидании #box, синим остался только тот элемент, на котором был совершен первый клик. А при возвращении курсора, все работало бы как до покидания контейнера = выделение двигается за курсором. |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 15:07. |