[jQuery].prop() 을 이해하기..

바로 앞에 포스팅에서 .hasClass(), .addClass(), .removeClass() 에 대해서 얘기를 했다.. 그런데 마지막에 약간의 여운을 남겨두었지.. 후후.. 좀 헷갈릴수도 있지만, 이렇게 분할해서 각각에 대한 것을 설명하고, 나 스스로도 이해를 해가야 더 기억에 남는다.. 나중에는 좀 더 좋아지것지..

소스는 동일하다 왜냐면, 앞에 포스팅에서는 10라인까지만 설명을 한것이고, 지금은 11라인을 위주로 설명을 하려고 한다..

jQuery

1 2 3 4 5 6 7 8 9 10 11 12 13

$('#agree_all').click(function() { if($('#agree_all').hasClass('agron')) { $('#agree_all').removeClass('agron'); $('#agree_all').addClass('agr'); } else { $('#agree_all').addClass('agron'); $('#agree_all').removeClass('agr'); } $('.chk_agr_main').prop('checked'), $('#agree_all').hasClass('agron')); });

HTML

1 2 3 4 5 6

<a href="#none" class="btn type2 agr" id="agree_all">모두 동의합니다.</a> <input class="chk_agr chk_agr_main" id="chk_agr1" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr2" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr3" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr4" type="checkbox" />

프로세스는 앞에 포스팅에서 언급한 것처럼 if else 를 통과한 후에 11라인을 실행해서 모두 동의합니다를 클릭하면 모두동의 모두동의 취소를 반복한다고 보면 된다..

그런데 위 jQuery 소스에서 11 라인의 의미를 모르니 다음에 더 복잡한 소스에서 상황을 직면하면, 분명 해메일것이다..

.prop() 는 JavaScript 의 프로퍼티[property]를 취급한다.. 

11 라인은 class 명칭이 chk_agr_main 것들에 대해서 checked 를 하라는 것이다.. 단, $('#agree_all').hasClass('agron') 에 따라서 true 또는 false 로 바꾸라는 것이다.. 바꿔말하면, $('.chk_agr_main').prop('checked'), ture); 또는 $('.chk_agr_main').prop('checked'), false); 인것이다..

조금만 알면, 진짜 간단하게 알 수 있는것이지만, 그래도 나에게는 어렵다라기보다 음.. 머라고 해야되지.. 의미를 좀 알아야 좋은것들..??

항상 개발을 하다보면, 세부적인것들에 대해서 이해를 하기보단 전체적인 흐름 및 그 상황을 자체로 이해하고 넘어갔다.. 그러다보니 다음에 또 그 상황을 만나더라도 상황만 알지 세부사항을 모르니 좀 문제가 생기곤 하더라..

더욱 문제는 다시 똑같은 상황을 만나면, 그 때라도 조금씩 세부적인것을 집고 넘어갔어야 이런일이 안생길텐데 또 똑같이 그냥 상황 자체만 이해하고 넘어가버린다.. 그래서 발전이 없는건가.. ㅠㅜ..

무튼!! 그렇기 때문에 아마도 이런 좀 소소한 것들에 대해서 포스팅을 종종하게 될듯한 느낌이다..