<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id='like'>좋아요</button><span>0</span>
<br>
<input type="text"><button class='writeCom'>댓글작성</button>
<br>
<div id="com">
<p>첫댓글<button class='removeCom'>삭제</button></p>
</div>
<script>
// 1. '좋아요' 버튼 누르면 0->1, 종아요->좋아요 취소
$(document).on('click', '#like', ()=>{
$('span').text(1)
$('#like').text('좋아요 취소')
$('#like').attr('id', 'dislike')
})
// 2. '좋아요 취소' 버튼 누르면 1->0
// 좋아요 0세트(id값 부여), 좋아요 취소 1세트(id값 부여)
// '좋아요 취소' 버튼은 기존에 없던 버튼 -> 동적 이벤트
$(document).on('click', '#dislike', ()=>{
$('span').text(0)
$('#dislike').text('좋아요')
$('#dislike').attr('id', 'like')
})
// 3. 내가 적은 댓글 + 삭제 버튼 같이 생겨남
$('.writeCom').click(()=>{
let com = $('input[type=text]').val()
$('#com').prepend('<p>' + com + '<button class="removeCom">삭제</button></p>')
})
// 4. 삭제를 눌렀으면 내가 삭제한 댓글만 삭제
// '삭제' 버튼은 기존에 없던 버튼 -> 동적 이벤트
// **삭제 시 생각해야 할 것
// 1) 내가 선택한 '이것' 지워줘 => this 키워드 사용
// 2) 버튼을 감싸고 있는 부모 요소
// 3) this 요소는 arrow function을 사용할 수 없다
$(document).on('click', '.removeCom', function(){
$(this).parent().remove()
})
</script>
</body>
</html>728x90
반응형
'언어 > JavaScript' 카테고리의 다른 글
| JS_Ajax_이론 (0) | 2022.07.14 |
|---|---|
| JS_말 게임(실습) (0) | 2022.07.14 |
| JS_jQuery(라이브러리) (0) | 2022.07.12 |
| JS_CallBack 함수 (0) | 2022.07.12 |
| JS_DOM_이미지 변경 (0) | 2022.07.11 |