知識點
- resize: none ：textarea不允許拉動
- text-indent ：規定文本塊中首行文本的縮進
- $.trim(str)：去掉字符串起始和結尾的空格
- focus([[data],fn])：當元素獲得焦點時，觸發 focus 事件
- 如果只將點擊事件綁定在li標籤上，新增的li標籤不會帶有綁定事件。
解決方案：
① 在新增li標籤時候，爲其增加綁定事件。但代碼較爲冗餘。
② 事件委託。將事件綁定在父級標籤上。
語法：父級標籤.on(事件,事件源,觸發函數)
例如：$('.dataList>ul').on('click', 'li', function () {
$(this).animate({
'width': '0px'
}, 1000, function () {
$(this).remove();
});
});
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {padding: 0;margin: 0;list-style: none;}
body {background-image: url("images/body_bg.jpg");}
.box {width: 700px;margin:100px auto;}
.input {width: 700px;height: 200px;border: 1px solid #cccccc;background-color: white;border-radius: 6px;}
.input .content {width: 690px;height: 150px;margin: 5px;box-sizing: border-box;border: 1px solid gray;resize: none; outline: none; padding: 10px;}
.input .submit {width: 100px;height: 30px;float: right;background: orangered;color: white;margin-bottom: 5px;margin-right: 5px; border: none; outline: none;cursor: pointer;}
.dataList {width: 600px;margin: 50px auto;}
.dataList>ul>li {width: 100%;height: 40px;line-height: 40px;color: slategray;background: lightblue;margin-bottom: 5px;border-radius: 40px;text-indent: 10px;cursor: pointer;}
</style>
</head>
<body>
<div class="box">
<div class="input">
<textarea class="content"></textarea>
<button class="submit">發佈</button>
</div>
<div class="dataList">
<ul>
<li>今天的天氣很好呀!</li>
<li>今天的天氣很好呀!</li>
<li>今天的天氣很好呀!</li>
</ul>
</div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var $content = $('.content');
$('.submit').click(function () {
var content = $content.val();
if($.trim(content).length <= 0){
alert('請輸入內容!');
$content.val('');
$('.content').focus();
return;
}
var $newLi = $('<li>' + content +'</li>');
var $ul = $('.dataList>ul');
$newLi.prependTo($ul);
$newLi.hide();
$newLi.slideDown(500);
$content.val('');
$content.focus();
});
$('body').on('click', 'li', function () {
$(this).animate({
'width': '0px'
}, 1000, function () {
$(this).remove();
});
});
});
</script>
</body>
</html>
運行結果
![在這裏插入圖片描述]()
