배열에있는 한식 메뉴들을 화면에 출력하는 과제를 진행하며, 카테고리를 나누고 선택하는 카테고리의 메뉴만 볼 수 있는 기능을 추가하고싶어 메뉴바를 만들어보았다.
이전에 사용해본 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에 적용된 스타일을 입힐 수 있다!
'JavaScript' 카테고리의 다른 글
Javascript에서 false로 간주되는 값들 (falsy) (0) | 2024.07.01 |
---|---|
DOM이란 무엇일까? (0) | 2024.06.29 |
[Javascript] 시간 간격을 두고 함수 호출하기 (setTimeout / setInterval) (0) | 2024.06.19 |
[Javascript/jQuery] 사용자 입력 비활성화하기 (text / button) (0) | 2024.06.18 |
Javascript 진법 변환하기 (프로그래머스 3진법 뒤집기) (0) | 2024.06.17 |