JavaScript連載38-編寫評論界面

時間 2021-02-24

標籤 javascript html java jquery git github web 微信編輯器函數欄目 JavaScript 简体版

原文原文鏈接

1、編寫評論頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D38_1_Review</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #box{
            width:800px;
            border:1px solid #ccc;
            margin:100px auto;
            padding:20px;
        }
        #my_textarea{
            width:80%;
            height:120px;
        }
        .box-top {
            margin-bottom:20px;
        }
        #ul li{
            border-bottom:1px dashed #ccc;
            color:red;
            line-height:44px;
        }
        #ul li a{
            float:right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box-top">
            <label>發表評論</label>
            <textarea id="my_textarea" cols="60" rows="10"></textarea>
            <button id="btn">發表</button>
        </div>
        <ul id="ul">
            <li>這是第一條評論<a href="#">刪除</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="jquery-3.5.1.js">
        window.addEventListener('load',function(ev){
            // $符號就是監聽某一個label
            $('btn').addEventListener('click',function (ev1) {
                // 獲取輸入框的內容
                var content = $("my_textarea").value; // 取到它的值
                console.log(content);
                if(content.length == 0) {
                    alert("請輸入評論的內容"); // 直接拋出的函數
                    return;
                }
                // 建立li標籤
                var li = document.createElement("li"); // 建立一個li標籤
                li.innerHTML = content + '<a href="javascript:;">刪除</a>'; // li標籤的內容   .innerHTML
                $('ul').insertBefore(li,$('ul').children[0]) // 先拿到ul標籤，而後把li這個變量插入到ul中第一個li的前面
                // 清除輸入框中的內容
                my_textare.value = '';

                // 刪除評論
                var as = ul.getElementsByTagName('a');
                console.log(as);
                for(var i=0;i<as.length;i++) {
                    var a = as[i];
                    a.addEventListener("click",function (ev2) {
                       this.parentNode.remove(); // 這個標籤就被刪除了
                    });
                }
            });
           // 監聽按鈕的點擊
           function $(id) {
               return typeof id=='string' ?document.getElementById(id):null;
            }
        });
    </script>
</body>
</html>