(jQuery) 블로그 태그 목록을 버튼으로 섞기

준비물

(jQuery) 연결하기

관련글

(jQuery) 태그 목록 섞기

(jQuery) 티스토리 태그 목록 컬러풀하게~

이번엔 버튼으로 섞어보자.
버튼을 누르면 글자 색상, 크기가 임의로 지정되고 순서가 섞이게 된다.

이전 글(관련글 참고)에서 작성한 코드를 재사용하기 위해 함수 안에 넣는다.

var tag_random = function() {
    var taglogli = $('.taglog li');
    taglogli.find('a').each(function() {
	    $(this).css('color', getRandomRGB).css('font-size', getRandomNumber(8,24)+'pt');
    });
    taglogli.shuffle();
}
$("<button>태그 섞기!</button>").click(function(){tag_random()}).insertAfter($('.taglog h3'));
tag_random();

$(HTML)
selector 뿐만 아니라 HTML 요소를 생성할 수도 있다.

자바스크립트 사용 환경에서만 버튼을 표시하기 위해 jQuery로 버튼을 추가하고 jQuery 객체로 만든다.

.click(function)
매치된 요소를 클릭하면 함수가 실행된다.

.insertAfter(jQuery('.taglog h3'))
taglog 클래스를 가진 요소의 자식 중에서 h3 요소의 뒤에, 매치된 요소를 삽입한다.