[JavaScript] 💌 여러 선택지 중 하나를 클릭 할 때 효과주기

✔ 협업을 위한 개발가이드로 팀원을 위해 작성한 글입니다.

⛏ 방법1: 자바스크립트 화살표 함수

👀 원리파악

1. 여기 선택지들이 있다!

<ul class="select_list">
	<li class="select_item">1</li>
    <li class="select_item">2</li>
    <li class="select_item">3</li>
    <li class="select_item">4</li>
</ul>

2. 클릭시 줄 효과를 css에 저장해둔다! (active라는 클래스에 효과를 넣었다!)

.select_item.active{
    border-color: #222;
}

.buy_before .select_item:not(.active){
    border-color: #ebebeb;
}

이제 클릭하면 클릭한 애만 active클래스를 추가해줄거다! 그러면 효과가 적용되니까!
4. 선택지들을 모두 가져와 이벤트를 등록해준다.
5. 그 이벤트는 active라는 class를 remove시키는 것!
(하나만 선택되야 하기 때문에 기존에 있던 active 클래스가 있다면 지워줘야 한다.)
6. 그리고 나서 클릭한 그 아이만 class를 add시킨다!
7. 나는 추가 효과로 선택시 버튼 하나를 활성화 시킬거다! display를 block으로 바꿔줄거다.

<div class="order_btn_area" style="display: none;" id="next">

🎃 필요한 개념

1. [javascript]이벤트 리스너
   참고: https://nevertrustbrutus.tistory.com/310
2. [css] 선택자
   참고: https://webty.tistory.com/60
3. [javascript] document 객체의 메소드
   참고: http://www.tcpschool.com/javascript/js_dom_document
4. [jquery 문법]
   참고: https://soft91.tistory.com/9

예제 (buyselect.html buyselect.css buyselect.js)

//선택지를 모두 가져온다
const items = document.querySelectorAll(".select_item");
//배열로 저장되기 때문에 forEach로 하나씩 이벤트를 등록해준다.
items.forEach((item)=>{
    item.addEventListener('click',()=>{
        items.forEach((e)=>{
          //하나만 선택되도록 기존의 효과를 지워준다.
            e.classList.remove('active');
        })
      // 선택한 그 아이만 효과를 추가해준다.
        item.classList.add('active');
      // 선택을 하면 다음으로 넘어갈 수 있는 버튼이 활성화 되도록 한다.
        document.getElementById('next').style.display='block';
    })
})

⛏ 방법2: jQuery

👀 원리파악

위와 동일하다.

🎃 필요한 개념

위와 동일하다.

예제

//jquery는 한번에 click 이벤트 등록이 가능하다.
$(".select_item").click(function(){
$(".select_item").removeClass("active");
  //this는 함수를 실행하게 만든 그 클릭한 요소다!
$(this).addClass("active");//그 요소에게 효과주고
$("#next").css("display","block")//버튼도 보이게 만들어준다.
});