[jQuery] 간단한 메뉴바 만들기 (클릭한 요소 스타일 바꾸기)

 

배열에있는 한식 메뉴들을 화면에 출력하는 과제를 진행하며, 카테고리를 나누고 선택하는 카테고리의 메뉴만 볼 수 있는 기능을 추가하고싶어 메뉴바를 만들어보았다.

이전에 사용해본 jQuery의 attr()을 활용해보았다.

 

 

간단 요약

1) 선택할 수 있는 카테고리 메뉴들을 나열한다.

2) 선택한 카테고리에 입힐 스타일을 css로 작성한다.

3-1) 카테고리가 클릭됐을 때 호출하는 함수에서 해당 요소를 받아 저장해둔다.

3-2) 이전 선택 요소를 기본 상태로 돌려주고, 선택된 요소를 선택됨 상태로 지정한다.

 

 

적용한 방법

1) 카테고리들을 나열한다.

<ul class="category">
    <li class="categoryItem" onclick="categoryChange(this)">전체보기</li>
    <li class="categoryItem" onclick="categoryChange(this)">밥</li>
    <li class="categoryItem" onclick="categoryChange(this)">국/찌개</li>
    <li class="categoryItem" onclick="categoryChange(this)">전</li>
</ul>

 

카테고리들의 나열이므로, ul을 활용해 묶어주었다.

 

 

2) 선택한 카테고리에 입힐 스타일을 작성한다.

.categoryItem:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 5px;
}

#selectedCategory {
  color: rgb(255, 147, 32);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 5px;
}

 

각 카테고리에 마우스를 올렸을 때, 커서를 pointer로 변경 + 밑줄 추가 해주었고 타이틀과 카테고리가 귀엽고 굵은 폰트라 밑줄 모양을 물결모양으로 선택했다 ㅎㅎ

언더라인도 스타일이 다양하고 글자와 떨어질 거리도 지정할 수 있다는 걸 처음 알았다.

 

 

3-1) 카테고리가 클릭됐을 때 호출하는 함수에서 해당 요소를 받아 저장해둔다.

3-2) 이전 선택 요소를 기본 상태로 돌려주고, 선택된 요소를 선택됨 상태로 지정한다.

let selectedCategory = $('#selectedCategory');
function categoryChange(selectedItem) {
    $(selectedCategory).removeAttr("id");
    selectedCategory = selectedItem;
    $(selectedCategory).attr("id", "selectedCategory");

    filterMenu();
}

 

카테고리 요소를 클릭했을 때 요소 자신을 인자로 넘겨주며  categoryChange를 호출한다.

이전에 선택된 요소(카테고리)는 id를 지워주고, 새로 선택된 요소에 id를 지정해준다.

이 과정을 위해서 기존에 선택된 요소를 저장해둘 수 있는 변수를 사용했다.

 

여기서 실수를해서 한참을 헤맸었는데.. 바로 html 요소를 받아와 jQuery 메서드인 attr을 바로 사용하려 한 것이다.

jQuery 메서드는 당연히 jQuery 객체에 사용해야하는데 아는 거라고 막 사용하다보니 당연한 사실을 간과했다..

// 첫 시도 -> javascript DOM 객체이므로 attr 메서드 없음
selectedCategory.attr("id", "selectedCategory");

// 깨달음 후 변경 -> jQuery 메서드를 사용하려는거니까 jQuery 객체로 바꿔줘야 함
$(selectedCategory).attr("id", "selectedCategory");

 

 

활용을 잘 하려면 기본을 제대로 알고있어야겠다는 생각이 다시 들었다.

이렇게하면 선택한 요소에만 id값을 지정해주면서, 해당 id에 적용된 스타일을 입힐 수 있다!