이번에는 태그에 클래스를 추가 혹은 제거하는 기능을 이용해보려고 합니다.
어떤 영역을 표시하려고 할때 혹은 감추려고 할때,
데이터의 목록을 선택하거나, 선택 해지할 경우가 필요할 때 등 다양한 용도에 필요한 기능입니다.
본문에서는 과일과 식재료를 선택하는 영역을 만들고
Radio 버튼을 눌러서 div_class 하나의 영역을 selected 클래스를 적용해주고 활성화를 시켜줍니다.
활성화된 영역에 대해서는 색상을 밝게 해줘서 표시해주며
추가적으로 .div_class.selected 하위로 지정해 그 영역에 있는 리스트들만 손모양 커서를 적용해줄 수 있고
선택시에 배경색으로 표시해줄 수 있습니다.
크게 2가지 역할로 보았을때
단순히 선택한 태그에 style 설정하거나, 선택된 영역의 하위에만 설정할 수 있도록 css 적용시 .div_class.selected 이런식의 방법으로 설정을 해두어
jQuery에서 selected 클래스만 적용 혹은 제거하는 역할만 해주고 있습니다.
* 추가함수 (간략한 안내 후 실습은 별도의 포스팅을 하도록 하겠습니다.)
.hasClass() : 현재 객체에 selected 등 클래스가 설정되어 있는지 확인하기 위해 사용하는 함수입니다.
.on() : 객체에 이벤트를 부여 하기 위한 함수입니다. 본문에서는 li태그에 click 이벤트를 부여하여 목록 클릭 시 발생하는 기능을 정의해 두었습니다.
<head>
<title>제목 없음</title>
<style type="text/css">
/* 스타일 적용 */
body { font:12px dotum; }
.box { clear:both; }
.div_class { float:left;width:15%;margin:10px;padding:10px;border-color:#ccc;border:1px solid;line-height:24px;color:#ccc; }
.div_class.selected { color:#777;border-color:#f55c72; }
.div_class.selected>ul>li { cursor:pointer; }
.div_class.selected>ul>li.selected { background-color:#f55c72;color:#fff; }
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- 관련태그 -->
<div class="box">
<input type="radio" name="market" value="과일" /> 과일
<input type="radio" name="market" value="식재료" /> 식재료
</div>
<div id="areaWrap" class="box">
<div id="market_area1" class="div_class">
<ul>
<li>수박</li>
<li>딸기</li>
<li>오렌지</li>
<li>감</li>
<li>방울토마토</li>
<li>파인애플</li>
<li>자몽</li>
<li>사과</li>
<li>메론</li>
<li>바나나</li>
<li>복숭아</li>
<li>키위</li>
<li>포도</li>
</ul>
</div>
<div id="market_area2" class="div_class">
<ul>
<li>감자</li>
<li>오이</li>
<li>고춧가루</li>
<li>호박</li>
<li>설탕</li>
<li>파프리카</li>
<li>오뎅</li>
<li>햄</li>
<li>콩나물</li>
<li>두부</li>
<li>밀가루</li>
<li>스파게티소스</li>
<li>당면</li>
<li>버섯</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 스크립트 코드
// 과일/식재료 영역 선택하기
jQuery("input[name='market']").click(function(){
jQuery(".div_class").removeClass("selected");
if(this.value=="과일") jQuery("#market_area1").addClass("selected");
else if (this.value=="식재료") jQuery("#market_area2").addClass("selected");
});
// 과일/식재료 별 목록선택하기
jQuery("#areaWrap").on("click", ".div_class.selected>ul>li",function(){
var jthis = jQuery(this);
if(jthis.hasClass("selected")) jthis.removeClass("selected");
else jthis.addClass("selected");
});
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery attribute selector (0) | 2017.12.18 |
|---|---|
| jquery each() (0) | 2017.12.16 |
| jquery appendTo() (0) | 2017.12.15 |
| jquery closest() (0) | 2017.12.14 |
| jquery click() (0) | 2017.12.13 |
댓글