클래스 속성 제어 메서드, 동적 바인딩_jQuery

1.
아래의 버튼 클릭 시 body 태그의 클래스 속성의 값이 .bg01, .bg02, .bg03 값이 순환되도록 하시오.

 <button type="button" id="btn01">배경색상전환</button>

2.
아래의 추가 버튼 클릭 시 행 추가, 제거 버튼 클릭 시 행 제거,
토글 버튼 클릭 시 행의 배경색 빨강과 흰색(순환)으로 변경 되도록 하시오.

<script type="text/javascript">
	var $ul = $('ul'), liHtml = '';
	liHtml += '<li>';
	liHtml += '<button type="button" class="add">추가</button> ';
	liHtml += '<button type="button" class="del">삭제</button> ';
	liHtml += '<button type="button" class="toggle">토글</button>';
	liHtml += '</li>';

	$(document).on('click', '.add', function() {
		$ul.append(liHtml);
	});
	$(document).on('click', '.del', function() {
		$(this).parent('li').remove();
	});
	$(document).on('click', '.toggle', function() {
		$(this).parent().toggleClass('bg01');

	});
</script>

1. 답

<script type="text/javascript">
	$(function() {
		var $body = $('body'), classArray = [ 'bg01', 'bg02', 'bg03' ], cnt = 0;
		$('#btn01').click(
				function() {
					//$body.removeClass(classArray);
					//$body.addClass(classArray[cnt]);

					$body.removeClass('bg01 bg02 bg03').addClass(
							'bg0' + (cnt + 1));
					cnt++;
					if (cnt > 2)
						cnt = 0;
				});
	});
</script>

2. 답

<script type="text/javascript">
	var $ul = $('ul'), liHtml = '';
	liHtml += '<li>';
	liHtml += '<button type="button" class="add">추가</button> ';
	liHtml += '<button type="button" class="del">삭제</button> ';
	liHtml += '<button type="button" class="toggle">토글</button>';
	liHtml += '</li>';

	$(document).on('click', '.add', function() {
		$ul.append(liHtml);
	});
	$(document).on('click', '.del', function() {
		$(this).parent('li').remove();
	});
	$(document).on('click', '.toggle', function() {
		$(this).parent().toggleClass('bg01');

	});
</script>