[jQuery] append()와 toggleClass()

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{width: 150px; height: 150px; float: left;}
#menubox{position: relative;}
#menu{overflow: auto;}
.sel{width: 140px; height: 140px; border: 5px dotted red; position: absolute; left: 300px;}
button{width: 150px; height: 50px; margin-left: 300px;}

</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		setInterval(function(){
			var div = $("#menu");
			$(".active").first().appendTo(div);
		}, 50);
		
		$("button").click(function(){
			$("img").toggleClass("active");
		
			if ($("button").text() == "start"){
				$("button").text("stop");
			} else {
				$("button").text("start");
			}
		});
	});

</script>
</head>
<body>

	<h1>오늘 공부 뭐하지?</h1>
	
	<div id="menubox">
		<div class="sel"></div>
		
		<div id="menu">
			<img alt="" src="resources/image/img01.png">
			<img alt="" src="resources/image/img02.png">
			<img alt="" src="resources/image/img03.png">
			<img alt="" src="resources/image/img04.png">
			<img alt="" src="resources/image/img05.png">
			<img alt="" src="resources/image/img06.png">
			<img alt="" src="resources/image/img07.png">
			<img alt="" src="resources/image/img08.png">
			<img alt="" src="resources/image/img09.png">
			<img alt="" src="resources/image/img10.png">
		</div>
		
		<button>start</button>
	</div>
	
</body>
</html>

setInterval(function(){
	var div = $("#menu");
	$(".active").first().appendTo(div);
}, 50);

해당 한수는 클래스가 active인것들의 첫번째를 div의 가장 마지막으로 보냅니다.

하지만 모든 img에는 class가 없습니다.

$("button").click(function(){
	$("img").toggleClass("active");
		
	if ($("button").text() == "start"){
		$("button").text("stop");
	} else {
		$("button").text("start");
	}
});

버튼을 클릭하게 되면 toggleClass메서드로 인해 active라는 클래스가 모든 img에 생깁니다.

버튼이 한번 눌르게 되면 버튼의 이름은 stop로 바뀝니다.

그러면 첫번째 이미지가 계속 마지막으로 이동하면서 마치 게임처럼 되겠죠?

stop 버튼을 한번 더 누르면 모든 img에 class가 사라집니다.

그러면 위의 인터벌 동작이 멈추게 됩니다.

728x90

'JS 관련 > JQuery' 카테고리의 다른 글

[jQuery] wrap(), wrapInner(), wrapAll() (0)	2022.02.26
[jQuery] 외부 삽입 메서드( after(), insertAfter(), before(), insertBefore() ) (0)	2022.02.25
[jQuery] prepend(), append() (0)	2022.02.23
[jQuery] replaceWith(), replaceAll() (0)	2022.02.22
[jQuery] toggleClass(), hasClass(), removeClass(), addClass() (0)	2022.02.21

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바