5.第2週目のエンコード

jQueryに挨拶!
javascriptがhtmlを移動するために使われているとすれば、jQueryは事前に作成した便利なjavascriptコードです!だから最初は必ず導入しなければなりません.(headにクエリーを書くと書きます~)
これは他の人があなたに作ったきれいなCSSコード集「Boot Street」と脈絡です.
article urlセクションに世宗大王を入力し、コンソールウィンドウに世宗大王を入力すると、「世宗大王」入力値が取得されます.また、val値を「ロング英実」と入力すると、Articleurl部分がロング英実に変更されていることがわかります.

$ ('#article-url').val();
'세종대왕'

したがって,$('#artice-url')までにarticle url入力ウィンドウを指定し,指定時にidを書くと積分Outが表示される.IDの後ろにval(); その#idをどのように処理するかを命令したのです.

<div class="posting-box" id="post-box">
            <div class="form-group">
                <label>아티클 URL</label>
                <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                <P> <button type="submit" class="btn btn-primary">기사저장</button></P>
            </div>
        </div>

まず、Post-box divにid="post-box"を指定します.
コンソールウィンドウからpost-boxを読み込むhide()を命じた

$('#post-box').hide()
r.fn.init [div#post-box.posting-box]

入力ウィンドウが非表示になっていることがわかります.逆に、$("#post-box").入力show()は再表示されるでしょうか?
css値をロードします.
.css(「width」)を入力すると、現在のPostboxのピクセルは500になります.
このときコマンドがcss(「width」,「700 px」)の場合、500 pxのボックスを動的に700 pxに変更します.

$('#post-box').css('width')
'500px'
$('#post-box').css('width','700px')
r.fn.init [div#post-box.posting-box]

次に、display値を入力するとblock状態が表示されます.hide()コマンドは、ボックスを非表示にします.ここで再びdisplay値を入力するとnone状態になります.したがって、displayがblockの場合は表示、noneの場合は非表示と表示されます.

$('#post-box').css('display')
'block'
$('#post-box').hide()
r.fn.init [div#post-box.posting-box]
$('#post-box').css('display')
'none'

既存のhtmlドキュメントでid=「btn-post-box」の値を指定し、コンソールウィンドウで次のコマンドを発行すると、「postingboxを開く」ボタンが「Ruulala」に変更されます.
このときワルコ.textの違いは、.valはinputボックスのみで、その他のテキスト変更に使用されます.文字を使う.

$('#btn-posting-box').text('룰루랄라')
r.fn.init [a#btn-posting-box.btn.btn-primary.btn-lg]

今は元の6つのカードポストにもう1つのカードを追加しましょう
card-columns部分id=「card-box」値が与えられ、lettemp html=`(backticが文字列として機能する)が使用されます.
既存のhtmlコードをbackticにコピーします.そして、$('#cards-box').append(temp html)を入力すると、写真のように追加されたカードが表示されます.

let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>`
undefined
$('#cards-box').append(temp_html)
r.fn.init [div#cards-box.card-columns]
$('#cards-box').append(temp_html)
r.fn.init [div#cards-box.card-columns]

位置決めボックスのオン/オフ機能を追加します.
まずPostingboxが表示されているかどうかを見てみましょう
まず、hey()関数ではなくonclick=「openclose()」関数を指定します.

  <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
        <p class="lead">
            <a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
        </p>
        </div>

前$("#post-box").css(「display」)は、ボックスの状態を表示するコードです.このコードをopenclose関数に追加します.次に、コンソールウィンドウに関数を入力したときの状態を表示します.log(status); 追加します.

    <script>

        function openclose(){
            let status = $('#post-box').css('display');
            console.log(status);
	}

    </script>

では、Chromeのコンソールウィンドウに現在の状態がblock(表示)状態であることを表示します.

Postboxがブロック状態の場合は非表示、else(非ブロック状態)の場合は表示されます.

<script>
function openclose(){
            let status = $('#post-box').css('display');
            if (status == 'block'){
                $('#post-box').hide();
            } else {
                $('#post-box').show();
            }

        }
</script>        

では、アクションに応じてPostboxボタンをオン/オフにする機能を追加しましょう.

 <script>

        function openclose(){
            let status = $('#post-box').css('display');
            if (status == 'block'){
                $('#post-box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            } else {
                $('#post-box').show();
                 $('#btn-posting-box').text('포스팅박스 닫기');
            }

        }

    </script>

post-boxを表示状態にします.statusがblockの場合、ボックスを非表示にし、btn-post-boxのテキストを「位置決めボックスを開く」に変更します.そうでない場合は、post-boxを表示し、テキストを「post-boxを閉じる」に変更します.


最初から閉じた状態を作りたい時?
CSSにあります.post-box classをロードし、display:noneステータスを追加すると、最初の画面はpostingboxを表示しない状態で開始します.

<style>
.posting-box {
            width: 500px;
            margin: 0px auto 50px auto;
            /*margin-bottom: 50px;*/
            border: 3px solid black;
            border-radius: 30px;
            padding: 30px;
            display: none
           
        }
    </style>