Как выделить группу элементов в js?
Здравствуйте. Есть небольшие одинаковые квадраты. Нужно по щелчку на любой из них выделить такие же самые элементы только рядом стоящие. Я реализовала это, но как мне кажется слишком легко потому что очень много кода. Как вы считаете как нужно было сделать поиск этих одинаковых рядом элементов? Ниже код:
#first, #second, #third, #four, #fife, #six < width: 40px; height: 40px; border: 1px solid black; >#first, #third, #fife < background: yellow; >#second, #four, #six
window.onload = function() < var blockcolor = document.getElementById('blockcolor'); var picFirst = document.querySelectorAll('#first'); var picSecond = document.querySelectorAll('#second'); var picThird = document.querySelectorAll('#third'); var picFour = document.querySelectorAll('#four'); var picFife = document.querySelectorAll('#fife'); var picSix = document.querySelectorAll('#six'); Array.from(blockcolor.querySelectorAll('#first')).forEach(function(e)< e.addEventListener('click', function()< for (var i = 0; i < picFirst.length; i++) < picFirst[i].style.borderRadius = '50px'; picFirst[i].style.transition = 'all 2s ease'; >>) >) Array.from(blockcolor.querySelectorAll('#second')).forEach(function(e) < e.addEventListener('click', function()< for (var i = 0; i < picSecond.length; i++) < picSecond[i].style.borderRadius = '50px'; picSecond[i].style.transition = 'all 2s ease'; >>) >) Array.from(blockcolor.querySelectorAll('#third')).forEach(function(e) < e.addEventListener('click', function()< for (var i = 0; i < picThird.length; i++) < picThird[i].style.borderRadius = '50px'; picThird[i].style.transition = 'all 2s ease'; >>) >) Array.from(blockcolor.querySelectorAll('#four')).forEach(function(e) < e.addEventListener('click', function()< for (var i = 0; i < picFour.length; i++) < picFour[i].style.borderRadius = '50px'; picFour[i].style.transition = 'all 2s ease'; >>) >) Array.from(blockcolor.querySelectorAll('#fife')).forEach(function(e) < e.addEventListener('click', function()< for (var i = 0; i < picFife.length; i++) < picFife[i].style.borderRadius = '50px'; picFife[i].style.transition = 'all 2s ease'; >>) >) Array.from(blockcolor.querySelectorAll('#six')).forEach(function(e) < e.addEventListener('click', function()< for (var i = 0; i < picSix.length; i++) < picSix[i].style.borderRadius = '50px'; picSix[i].style.transition = 'all 2s ease'; >>) >) >Как выбрать все элементы кроме текущего в forEach?
Подскажите пожалуйста, как выбрать все элементы кроме текущего внутри forEach?
Имеется меню, нужно, чтобы класс .active одновременно мог иметь только 1 пункт меню.
Простой 1 комментарий
Варианты решения с помощью делегирования событий:
Вешаем обработчик клика на корневой элемент и слушаем событие клика. Если клик произошел на элементе с нужным классом, тогда проходим циклом по всем элементам с этим классом, далее удаляем у них «активные» классы и добавляем их текущему элементу:
const elements = document.querySelectorAll(".value-item"); const stateClasses = ["value-active", "basic__shadow"]; document.addEventListener("click", (< target >) => < if (!target.classList.contains("value-item")) return; elements.forEach(v =>v.classList.remove(. stateClasses)); target.classList.add(. stateClasses); >);Почти всё тоже самое что и в первом варианте — за исключением того в этот раз будем работать без цикла. Находим элемент с «активными» классами и удаляем их, после чего добавим эти классы текущему элементу, на котором и произошел клик:
const stateClasses = ["value-active", "basic__shadow"]; document.addEventListener("click", (< target >) => < if (!target.classList.contains("value-item")) return; const activeItem = document.querySelector(".value-active"); activeItem && activeItem.classList.remove(. stateClasses); target.classList.add(. stateClasses); >);Варианты решения с помощью цикла forEach:
const elements = document.querySelectorAll(".value-item"); const stateClasses = ["value-active", "basic__shadow"]; const toggleActiveElement = element => < element.addEventListener("click", () => < elements.forEach(n =>n.classList.remove(. stateClasses)); element.classList.add(. stateClasses); >); >; elements.forEach(v => toggleActiveElement(v));const elements = document.querySelectorAll(".value-item"); const stateClasses = ["value-active", "basic__shadow"]; const toggleActiveElement = element => < element.addEventListener("click", () =>< document.querySelector(".value-active")?.classList.remove(. stateClasses); element.classList.add(. stateClasses); >); >; elements.forEach(v => toggleActiveElement(v));Однако у этих двух вариантов есть небольшие минусы и для таких целей как переключение активного класса при клике, хорошо подходит делегирование событий. Но почему в большинстве случаев не стоит использовать цикл для решения подобных задач?
1. Вы заставляете браузер искать все элементы с определенным классом на странице.
2. Добавляется обработчик на каждый элемент, хотя возможно пользователь и не кликнет на этот элемент.
3. addEventListener добавленный через цикл к каждому элементу определенного NodeList — не будет работать на динамически добавленных элементах. Разумеется если не добавить к ним обработчики, после создания, но это конечно так себе работа.
Возможно есть и другие побочные эффекты и/или минусы у такого решения задачи.
Обычно добавление обработчиков в цикле используется в связи с недостатком опыта или просто потому что данный способ в той или иной степени решает поставленную задачу и делать по другому тупо нет желания или смысла. Но даже если отказ от подобных решений и является просто напросто экономией на спичках и/или чем-то там ещё, в любом случае лучше использовать инструменты и функции по назначению, а не потому что просто так хочется или «удобно».
Правда всё же есть исключения когда добавление обработчиков в цикле оправданно и будет наиболее подходящим способом решить задачу чем например через делегирование событий.
JavaScript Selections (работа с выделениями)
В Netscape Navigator 4.0x и Internet Explorer 4.0x возможно получить содержимое выделенной на странице области. В Internet Explorer 4.0x вы можете выделить любой элемент, в том числе, текст и изображения. В отличие от него в Navigator 4.0x поддерживает только выделение текста.
В этой статье мы рассмотрим различия между выделениями в Navigator 4.0x и Internet Explorer 4.0x. Navigator 4.0x, в отличие от Internet Explorer 4.0x, меньше полагается на операционную систему клиента, потому что, в некоторых системах стандартные возможности не реализованы.
Navigator 4.0x поддерживает единственный метод, который возвращает текст текущего выделения в виде строки. Internet Explorer 4.0x работает с выделением с помощью текстовых областей.
Как Navigator 4.0x и Internet Explorer 4.0x работают с выделениями.
В Navigator 4.0x возможно выделить только текст. Например, когда вы проведете курсором мышью над изображением, он не подсвечивается. Броузер просто выделяет текст до и после изображения. Высота выделения зависит от размера текста. Не возможно определить какой тип текста выделен.
Internet Explorer 4.0x во многом отличается от Navigator 4.0x. В Internet Explorer 4.0x возможно выделить практически все элементы страницы. Например, вы можете выделить текст, изображения и кнопки. Однако, некоторые элементы, такие как выпадающие меню (SELECT) не могут быть выделены.
В отличие от большинства остальных программ, выделение в Navigator 4.0x остается активным (подсвеченным), даже если окно теряет фокус. Например, если вы с помощью мыши выделите область документа, а потом нажмете на кнопку на странице, Navigator 4.0x не снимет выделение с текста. В отличие от Navigator 4.0x, выделение в Internet Explorer 4.0x снимается, когда выделенный элемент теряет фокус. Например, когда вы нажмете кнопку на странице, браузер снимет текущее выделение.
В обоих броузерах «четвертого» поколения, выделение снимется, если после выделения части документа вы кликните на ссылку. Поэтому вы не можете написать скрипт, который попросит пользователя кликнуть на ссылку, с помощью которой будет запущен скрипт отображающий текущее выделение. Мы рассмотрим новые события Navigator 4.0x и Internet Explorer 4.0x для отображения выделенной пользователем области, когда он или она отпускаю кнопку мыши. Другими словами, мы будем обрабатывать выделение, когда произойдет событие mouseup.
Как использовать события связаные с выделениями.
Несмотря на то, что Navigator 4.0x не может возвращать выделений текст в полях text и textarea, он может реагировать на них. Navigator 4.0x поддерживает событие onselect, которое запускает JavaScript код, когда пользователь выделяет часть текста в поле формы. Это событие может использоваться для других элементов страницы.
Событие onselect также поддерживается браузером Internet Explorer 4.0x, как событие для полей text и textarea. Это событие не пузырьковое, как многие другие в Internet Explorer 4.0x. Непузырьковые события могут быть принято только у объекта произведшего событие, поэтому вы не можете принимать событие объекта select на уровне объекта document.
Internet Explorer 4.0x также поддерживает событие onselectstart, которое может ассоциироваться с любым элементом страницы. Это событие происходит, когда курсор мыши начинает выделение одного или нескольких элементов. Событие генерируется элементом, с которого начинается выделение. Так как Navigator 4.0x не поддерживает это событие, то использовать его бесполезно. С помощью скрипта возможно имитировать это действие в Netscape 4.0x. Более того, в Navigator 4.0x поддерживается только выделение текста, поэтому не имеет смысла определять, как элемент сгенерировал событие. Лучший способ прореагировать на выделение — это событие onmouseup, которое срабатывает, когда пользователь отпускает кнопку мыши. С помощью назначения скрипта на это событие возможно проверить, было ли сделано выделение, и среагировать соответствующим образом.
Событие onmouseup поддерживается обоими браузерами «четвертого» поколения, поэтому наиболее полезно. В Internet Explorer 4.0x вы можете использовать преимущество события onmouseup для того, чтобы найти последний элемент выделения. Свойство srcElement объекта event ссылается на этот элемент. Простейший пример обработки события, который автоматически определяет выделение, приведен ниже:
function detect(e) < // check if a selection exists >if (window.Event) document.captureEvents(Event.MOUSEUP); document.onmouseup = detect;