[jQuery] 기본개념

메모장 만들기

포스팅 박스 열기/닫기

1. openclose라는 이름을 단 코드를 짠다.
   add) 버튼을 클릭하면 열리게 body에 있는 button 부분에 속성 추가

<script>
function openclose() {
	// 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>

// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

---

2. 포스팅 박스 열기/닫기
   add) 먼저, id를 생성해주고, show와 hide를 이용하기

<div class="form-post" id="post-box">
// 포스팅 박스 div를 찾아서 그 전체에 post-box라는 id 달아주기
    <div>
        <div class="form-group">
            <label for="exampleFormControlInput1">아티클 URL</label>
            <input class="form-control" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
        <button type="button" class="btn btn-primary">기사저장</button>
    </div>
</div>


......

// -> show와 hide를 이용하기

function openclose() {
    
    if ($('#post-box').css('display') == 'block') {
        // id 값 post-box의 display 값이 block (보임)이면
        
        $('#post-box').hide();
        // post-box를 가리고
        
    } else {
        $('#post-box').show();
        // 아니면 post-box를 펴라
    }
}

=> 여기서, 포스팅 박스를 시작부터 감춘다면,

<div class="form-post" id="post-box" style="display:none">

추가해준 id 옆에 style = "display:none"을 붙여줘서 간단하게 제어가능!
(none은 안보이게 하는것)
물론, $('#post-box').css('display') == 'none'으로도 제어가능!

---

포스팅 박스 열기/닫기 시 글씨 바꾸기

1. id 값 부여

<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

---

2. button의 텍스트 변환
   add) 텍스트 쓸때 block인지 none인지에 따라서 달라짐! 잘 보고 쓰기

function openclose() {
    
    if ($('#post-box').css('display') == 'block') {
        // id 값 post-box의 display 값이 block(보임) 이면
        $('#post-box').hide();
		// post-box를 가리고
        $('#btn-posting-box').text('포스팅 박스 열기');
        // 가렸으니까 텍스트는 '포스팅 박스 열기'로 바꾸기
    } else {
        		 //아니면
        $('#post-box').show();
				// post-box를 보이게 해라
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }          // 보이게 했으니까 이제 다시 텍스트 '포스팅 박스 닫기'로 바꿔주기
}