[jquery] - this를 이용한 코드 중복 방지
jquery 사용시 같은 class나 id를 가진 태그가 예를들어 클릭이 되었을때 각 상황에 맞는 함수를 실행하려고 한다면 비효율적으로 작성 할 수도 있다.
하지만 this 를 사용하면 코드의 길이와 중복을 피할 수 있다.
아래 코드를 예로 들어 설명하겠다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li class="main">
Security
<ul class="sub">
<li>web</li>
<il>system</il>
</ul>
</li>
<li class="main">
hack
<ul class="sub">
<li>server</li>
<il>webhack</il>
</ul>
</li>
</ul>
</div>
</body>
</html>
우선 서브 카테고리를 숨기고 메인 카테고리를 클릭했을 때, 그에 해당하는 서브 카테고리를 펼치거나 접어보려고 한다.
하지만 main class는 2개이기 때문에 각각의 상황에 맞는 코드를 중복하여 사용하기에는 똑같은 동작을 하는 코드가 중복이 되어 버린다. 이때 this를 사용하면 간단해진다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li class="main">
Security
<ul class="sub" style="display:none">
<li>web</li>
<il>system</il>
</ul>
</li>
<li class="main">
hack
<ul class="sub" style="display:none">
<li>server</li>
<il>webhack</il>
</ul>
</li>
</ul>
</div>
<script>
$(".main").click(function(){
if($(this).find(".sub").is(":visible")){
$(this).find(".sub").slideUp();
}
else{
$(this).find(".sub").slideDown();
}
})
</script>
</body>
</html>this 를 사용하여 main class가 여러개 이지만, 사용자가 둘중 어느것을 클릭하게 되면 this는 사용자가 클릭한 객체를 가지게 된다. 이를 이용해 find() 함수를 써서 자식 객체에 sub class를 찾고 어떤 함수를 실행하는 식으로 코드를 구성하면 된다.
'Code' 카테고리의 다른 글
| [jquery] - 카테고리 펼치기 접기 만들기 (2) | 2019.10.12 |
|---|---|
| [web] - javascript로 unix timestamp 변환하기 (0) | 2019.08.07 |
| [python] - beautiful soup를 이용한 웹 크롤러 만들기 (0) | 2019.04.06 |
| [python] - requests 모듈을 이용한 웹 요청 (0) | 2019.04.06 |
| [python] – sha256 암호화 및 복호화 (0) | 2019.04.06 |