效果图
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<title>模拟留言板</title>
<link href="lyb_style.css" rel="stylesheet" type="text/css" />
<style>
.yellow {
background: yellow;
}
.grey {
background: #f1f1f1;
}
.show {
display: block
}
.hide {
display: none;
}
i {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="parent">
<h4>留言内容：</h4>
<div id="box">
<em id="em">这里会显示留言内容……</em>
<!-- <p class="grey">
<i>2.</i>
<b>sdsfw3</b>
<span class="hide">
<a href="javascript:;">确定删除</a>
<strong style="color:red">第2条</strong>
</span>
</p> -->
</div>
<textarea id="text"></textarea><br />
<input id="btn" type="button" value="发表留言" />
</div>
<script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
在JQ中所有的事件都是通过addEventListener绑定的，所以当使用事件的时候
如果不解除前一次绑定，那么容易出现事件重复执行。
解决：
off().click() 解除上一次的事件
*/
var $parent = $('#parent'),
$btn = $parent.find('#btn'),
$text = $parent.find('#text'),
$box = $parent.find('#box'),
$em = $parent.find('#em'),
num = 0;
//给发表留言绑定点击事件
$btn.click(function () {
let val = $text.val(); // 获取到文本域的内容；
let $p = $(
`<p class="grey"><i>${++num}.</i><b>${val}</b><span class="hide"><a href="javascript:;">确定删除</a><strong style="color:red">第${num}条</strong></span></p>`
);
$box.append($p);
// 当鼠标划上p标签时，让当前的标签背景变成黄色；
$p.mouseover(function () {
// this --> 转成jquery的实例
// attr : 设置行间属性,找到该元素下的span，将其class设置为show;
$(this).attr("class", "yellow").find("span").attr("class", "show");
})
$p.mouseout(function () {
// this --> 转成jquery的实例
$(this).attr("class", "grey").find("span").attr("class", "hide");
})
// 点击确定删除，删除该条信息
$p.find("a").click(function () {
$(this).parent().parent().remove();
let allI = $box.find("i");
let allStrong = $box.find("strong");
for (let i = 0; i < allI.length; i++) {
$(allI[i]).text(`${i+1}.`);
$(allStrong[i]).text(`第${i+1}条`);
}
// 如果length为0；说明没有了标签，让em再次显示；
if (allI.length === 0) {
$em.css("display", "block");
}
// 每删除一条就把全局num-1;
num--;
})
$text.val("");
$em.css("display", "none")
})
</script>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
li { list-style: none; }
#parent { width: 600px; margin: 0 auto; }
h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; }
p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }
#box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }
span { position: absolute; top: 0; right: 0px; }
em { position: relative; top: -13px; }
#text { width: 100%; height: 90px; overflow: auto; }
#btn { width: 100%; height: 50px; }
