이미지 선택 기능 만들기

Part 2. 이미지 선택 기능 만들기

- 이미지 클릭 이벤트 핸들링 하기

1> div 태그에 onclick 이벤트가 발생시 함수를 작성한다.
2> 이미지를 클릭했을 때 div 태그의 class 속성값을 얻어온 후 indexOf메소드를 사용하여 image-selected 클래스의 존재 여부를 확인한다.
2-1>image-selected 클래스가 없다면 -1값을 리턴하고
class에 image-selected를 추가해준다.
2-2> image-selected 클래스가 이미 존재한다면
class에 image-selected 클래스를 삭제해준다.

<script>
      div.setAttribute("class","image");
      div.onclick = function(){
        if (this.getAttribute("class").indexOf("image-selected") 
        == -1){
          this.setAttribute("class", "image image-selected")
        }
        else{
          this.setAttribute("class", "image ")
        }
    }
</script>

indexOf?

문자열 내에서 특정한 문자열의 index 값을 리턴한다.
탐색하려는 문자열이 존재하지 않는다면 -1을 반환한다.

- 이미지 선택/해제 기능 구현하기

• JS에서 해당 엘리먼트에 클래스 리스트에 접근하여 보다 간편하게
  클래스를 추가하거나 삭제하는 API제공하고 있다.
• classList 객체를 사용하면 해당 요소에 class를 배열로 반환해준다.
• classList 객체에는 add, remove, toggled과 같은 메소드를 사용할 수 도 있다.
• toggle은 인자로 받은 class가 있으면 삭제해주고 없다면 추가해주는 기능을
  구현해준다.

<script>
      div.onclick = function(){
        this.classList.toggle("image-selected")
      }
</script>