jQuery 를 이용하여 티스토리의 온/오프 상태를 확인하는 방법

jQuery 를 이용하여 티스토리의 온/오프 상태를 확인하는 방법을 알아 보겠습니다.

 

$('#tistorytoolbarid').ready(function(){
	var logout = $('.tt_menubar_logout').text();
	if (logout === "로그인"){
		$('#topmenu .tistory_logon').css('display','');
		$('#topmenu .tistory_logoff').css('display','none');
	} else { 
		$('#topmenu .tistory_logon').css('display','none');
		$('#topmenu .tistory_logoff').css('display','');
	}
	$('#tistorytoolbarid').css('display','none');
});

 

코드는 우측 상단의 티스토리 메뉴를 이용하는 것입니다.

 

표시 부분이 로그인을 하게 되면 로그아웃으로 변하게 되고 로그아웃을 하게 되면 반대로 로그인이라 바뀌게 됩니다.

 

 

 

그림의 표시 부분이 "로그인"으로 표시 되었을때는 로그인을 하지 않은 상태가 되는 것입니다.

 

따라서 jQuery를 이용하여 저부분의 값을 구하면 해결 되는 것입니다.

 

$('#tistorytoolbarid').ready(function(){

 

저부분의 메뉴가 ID='tistorytoolbarid'에 속해 있습니다. 따라서 'tistorytoolbarid'가 준비 되면 실행하라는 것입니다.

 

var logout = $('.tt_menubar_logout').text();

 

우리가 값을 가져 오고 싶어하는 "로그온/로그아웃"이 토글 되는 위치가 Class='tt_menubar_logout'에 속해 있습니다.

 

이 부분에서 우리는 텍스트 값만 불러 옵니다. 즉 "로그온/로그아웃" 텍스트만 불러 오게 됩니다.

 

나머지 부분은 로그온을 불러오면(로그아웃 상태 일 때) 설정하고 싶어 하는 곳의 Css값을 토글하여 보여주거나 감추가 됩니다.

 

마지막으로

 

$('#tistorytoolbarid').css('display','none');

 

우리가 취하고자 한 값을 이미 구했으므로 저 상단 메뉴는 숨기도록 설정합니다.

 

 

코드가 어렵지는 않습니다.

 

응용하거나 더 좋은 방법이 있을 수도 있습니다.

 

감사합니다.