Javascript
if($selectMenuItem) 관련 질문을 다시 올립니다.

<style>

.tab-menu {

list-style: none;

height:80px;

}

.tab-menu li {

width:99px;

height:40px;

background-position-y:0;

text-indent: -1000px;

overflow: hidden;

display: inline-block;

float:left;

}

.tab-menu li:hover {

background-position-y: -40px;

}

.tab-menu li.select {

background-position-y: -80px;

height:80px;

}

.tab-menu li.menuitem1 {

background-image: url(./images/newbtn.bar.1.png);

}

.tab-menu li.menuitem2 {

background-image: url(./images/newbtn.bar.2.png);

}

.tab-menu li.menuitem3 {

background-image: url(./images/newbtn.bar.3.png);

}

.tab-menu li.menuitem4 {

background-image: url(./images/newbtn.bar.4.png);

}

.tab-menu li.menuitem5 {

background-image: url(./images/newbtn.bar.6.png);

}

</style>

<script>

$(document).ready(function(){

tabMenu('#tabMenu1');

});

function tabMenu(selector){

var $tabMenu = null;

var $menuItems = null;

var $selectMenuItem = null; // a주석

function init(){

$tabMenu = $(selector);

$menuItems = $tabMenu.find('li');

}

function initEvent(){

$menuItems.click(function(){

setSelectItem($(this));

});

}

function setSelectItem($item){

if($selectMenuItem){ // b 주석

$selectMenuItem.removeClass('select');

}

$selectMenuItem = $item;

$selectMenuItem.addClass('select');

}

init();

initEvent();

}

</script>

</head>

<body>

<ul class="tab-menu" id="tabMenu1">

<li class="menuitem1">google</li>

<li class="menuitem2">facebook</li>

<li class="menuitem3">pinterest</li>

<li class="menuitem4">twitter</li>

<li class="menuitem5">path</li>

</ul>

</body>

</html>

위와 같은 소스가 있습니다.

설명드리자면,,

아. style 은 위 원문에 적지 않고, 스크립트만 넣은 거라서,,설명드리자면요,,

각 텝에 mouseenter하면 탭의 배경이미지가 위로, click하면 더 위로.,,

올라가면서 각각 변하는 것입니다.

근데, 이건 밑에 스크립트와는 관련이 없는 부분입니다.

사실, 이런 탭메뉴와 관련된 것이 계속 이해가 안돼고, 내내 괴롭히고 있습니다. -.=;;

즉,

function setSelectItem($item){

if($selectMenuItem){

$selectMenuItem.removeClass('select');

}

$selectMenuItem = $item;

$selectMenuItem.addClass('select');

}

위 부분입니다. 위 소스가 작동하는 것은 css를 공부할 때 이해를 했던 것이라서

로직은 잘 이해를 합니다.

근데, $selectMenuItem <<== 이 정체가 계속 이해가 안됩니다..

위에 a, b라고 주석을 달아놓은 부분입니다.

제가 if의 조건문에 대해서 저번에 질문을 드렸는데요, 그때,,

가령 var x = null;; 이럴 경우,,

if(x){ a } <<= 이 경우에는 null은 0,,즉 false를 의미하기 때문에 a가 실행이 되지가

않는다. 라는 답변을 올려주셨습니다.

예를 들자면,

var x = 10;

if(x%2){ a } else { b } 이렇다면 b가 실행이 됩니다.. 즉, 10을 2로 나눈 나머지는

0 이니까요...

해서, 제가 이런 식으로 이해는 하는데요..

위 원소스는,,,사실 책에는 이렇게 써있습니다.

맨위에 a주석을 단 곳에

var $selectMenuItem = null;;

이렇게 한 것은 $selectMenuItem

즉, var $selectMenuItem = null; <<<== 여기서 null 이 들어갔다는 것은

$selectMenuItem라는 전역변수에 앞으로 그 어떤 클래스 인스턴트라든지,,객체가 들어갈 것이라는 것을 암시하고 있다는데요....(책에 나온 설명이 이럽니다.)

그래서, 원소스의 맨위에도

var $tabMenu = null;

var $menuItems = null;

var $selectMenuItem = null;

이렇게 나온 것입니다.

그래서, 이 경우에는 null 이라는 것이 이 원소스구문에서는 true/false를 판별하는

용도로 사용이 되지 않는 것 같습니다...

function setSelectItem($item){ //여기서 $ item은 바로 위 initEvent() 함수에서

내려온 $(this)로서 ,,5개의 li중에서 클릭된 li 를 담고 있는데요..

if($selectMenuItem){ //c주석

$selectMenuItem.removeClass('select');

}

$selectMenuItem = $item;

$selectMenuItem.addClass('select');

}

이렇게 위부분에서

그렇다면 위의 c주석을 해석하자면,

if($selectMenuItem)...이것은 무슨 의미인지,,,바로 이게 계속 이해가 안됩니다. -.=;;

즉, 맨위에 전역변수로서

var $selectMenuItem = null; 이렇게 한번 선언된 후,,

지금 처음 나옵니다...;;;

var $tabMenu = null;

var $menuItems = null;

이런 것 들은 스크립트를 쭉 내려가면서 객체를 담게 되는 것이 나오고요..-.=;;

가령,

function init(){

$tabMenu = $(selector);

$menuItems = $tabMenu.find('li');

}

위와 같은 소스에서요...

그러나,

$selectMenuItem은 아무런 객체를 담지를 않고,

function setSelectItem($item){

if($selectMenuItem){

$selectMenuItem.removeClass('select'); // d주석

}

$selectMenuItem = $item;

$selectMenuItem.addClass('select');

}

이렇게 나옵니다...

근데, d주석부분을 보면

select라는 클래스를 제거한다는 것을 것을 보니

$selectMenuItem이라는 것이 select 클래스가 있는 li를 가리킵니다....

그리고, 바로 밑에 $selectMenuItem에 클릭한 $this(즉, 클릭한 li) 를 담습니다.

그리고, 바로 밑에 그 li 에 addClass를 하게 됩니다..

이렇게는 이해를 하는데..

if($selectMenuItem)... 이걸 도무지 이해가 안되더군요...-.=;;;;

어떻게 해석이 되는지를요..

그래서,

function setSelectItem($item){

$selectMenuItem = $item; //바꾼 위치.

if($selectMenuItem){

$selectMenuItem.removeClass('select');

}

$selectMenuItem.addClass('select');

}

이렇게 위치를 바꿔봤습니다.

즉,

$selectMenuItem은 무엇인가? 이건 위 스크립트에서 내려온 $this이다..

라고 이해가 되어서요..

근데, 그렇게 해도,

if($(this)).. 이렇게 되어버리는 것인데,,,

그러면, 이것도 또 이해가 안됩니다...

여기서 $(this)는 클릭한 li를 말한다는 것은 아는데요..

if구문에 넣어서,,

if($(this))로 하면,,,이게 뭘 어쨌따는 건지....

즉,

if($selectMenuItem) 처럼 어쨌따는 건지,,,현재로선 죽어도 이해가 안돼네요...-.=;;

다른 스크립트는 이해가 되는데,,

꼭, 이렇게 탭관련해서 if($selectMenuItem) 이런 식으로 나올때마다

이해가 안됩니다...;;;

언제나, 자세한 답변을 주시려고 노력하시는 김호님께

인간적으로 감사를 드립니다...

0
1
2,421
댓글 1