🗂️ INDEX

글 작성자: Universe7202

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를 찾고 어떤 함수를 실행하는 식으로 코드를 구성하면 된다.