같은 이름의 클래스로 되어있을때 클릭한 이벤트만 찾아 적용하기 위해서
Jquary를 사용하면 편하다
// 색상 추출
$(".BgColor").click(function() {
BgColor = $(this).attr("value");
$(this).siblings().css("border", "2px solid #939597");
$(this).css("border", "2px solid red");
});
내가 선택한 이벤트가 외부 라이브러리를 통해 값을 가져와 변수 BgColor에 담을 경우 내가 선택한 색상이 BgColor와 일치하면 형제들의 색상을 하나로 통일해주고 선택한 색상을 강조하기 위한 코드이다.
const selectColor = document.getElementsByClassName("BgColor");
for(let i = 0; i < selectColor.length; i++) {
if(BgColor == selectColor[i].getAttribute("value")) {
const siblings = Array.from(selectColor[i].parentNode.children);
siblings.forEach((sibling) => {
sibling.style.border = "2px solid #939597";
});
selectColor[i].style.border = "2px solid red";
}
}