Как выделить группу элементов в js?

Question

MariaM0479 @MariaM0479

JavaScript

Как выделить группу элементов в js?

Здравствуйте. Есть небольшие одинаковые квадраты. Нужно по щелчку на любой из них выделить такие же самые элементы только рядом стоящие. Я реализовала это, но как мне кажется слишком легко потому что очень много кода. Как вы считаете как нужно было сделать поиск этих одинаковых рядом элементов? Ниже код:

<div id="blockcolor">
	<div id="first">&#10027;</div>
	<div id="first">&#10027;</div>
	<div id="second">&#10052;</div>
	<div id="second">&#10052;</div>
	<div id="second">&#10052;</div>
	<div id="third">&#10027;</div>
	<div id="third">&#10027;</div>
	<div id="four">&#10052;</div>
	<div id="four">&#10052;</div>
	<div id="fife">&#10027;</div>
	<div id="fife">&#10027;</div>
	<div id="fife">&#10027;</div>
	<div id="six">&#10052;</div>
</div>

#first, #second, #third, #four, #fife, #six{
		width: 40px;
		height: 40px;
		border: 1px solid black;
	}
	#first, #third, #fife{
		background: yellow;
	}
	#second, #four, #six{
		background: pink
	}

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';
		}
	})
})
}

Вопрос задан более трёх лет назад
329 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

4 комментария

MariaM0479 @MariaM0479 Автор вопроса

спасибо, но немного не так. по клику нужно выделить тот же самый элемент (и группу таких же самых рядом стоящих элементов) на который кликнули, а тут получается соседние элементы (разные) выделяются

Написано более трёх лет назад
Anton fon Faust @bubandos

MariaM0479, ну, добавьте чтобы на таргет тоже класс вешался. Одна строчка.

Написано более трёх лет назад

MariaM0479 @MariaM0479 Автор вопроса

Чего-то видимо я не понимаю(Посмотрите, если вам не сложно и подскажите

<div id="blockcolor">
  <div class="first">&#10027;</div>
  <div class="first">&#10027;</div>
  <div class="second">&#10052;</div>
  <div class="second">&#10052;</div>
  <div ckass="second">&#10052;</div>
  <div class="first">&#10027;</div>
  <div class="first">&#10027;</div>
</div>

.bordered {
  outline: 1px solid red;
}

var blocks = document.getElementById("blockcolor");

blocks.addEventListener("click", clickHandler);

function clickHandler(e) {
	var target = e.target;
  if(target.className == "first" || target.className == "second"){
  target.className = "bordered"
  }
  var bordered = blocks.querySelectorAll(".bordered");
  console.log(e);
  
  for (var i=0; i < bordered.length; i++) {
  	bordered[i].className="";
  }
  if (target.nextElementSibling)
  	target.nextElementSibling.className="bordered";
  if (target.previousElementSibling)
  	target.previousElementSibling.className="bordered";
  
}

Написано более трёх лет назад