JQuery 动态留言
Posted 霜序0.2℃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 动态留言相关的知识，希望对你有一定的参考价值。
JQuery 动态留言
请设计一个动态留言的功能,满足如下要求:
- 页面默认有让用户填写昵称的及留言内容的文本框
- 用户输入的昵称及内容不可为空，当输入后点发布时，能将最新的留言显示在留言框及昵称文本框的上方,不断发布则不断添加
- 要求新留言默认在上，旧留言默认在下
- 每条新增的留言后方会跟随一个删除按钮,点击删除按钮的时候会删除该条留言
- 要求使用JQuery来实现;6.要求对整个留言功能进行简单的美化；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言</title>
<style>
body {
text-align: center;
}
#btn {
color: #2fa8ec;
}
#all {
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<script src="js/jquery-3.6.0.js"></script>
<div id="all">
<div class="messages"></div>
<div>
<form method="post">
<label for="msg">发送信息:</label><input type="text" id="msg">
<input type="button" id="btn" value="提交">
</form>
</div>
</div>
<script>
$(document).ready(function () {
let cnt = 0;
$("#btn").click(function () {
let val = $("#msg").val();
let btn = "<button>删除</button>"
let msg = "<div class='" + cnt + "'>" + val + btn + "</div>"
cnt++;
$(".messages").prepend(msg);//前面加
// $(".messages").append(msg);//后面加
$("#msg").val("")
})
$(".messages").on("click", "button", function () {
let id = $(this).parent().prop("className")
console.log(id)
$("div[class=" + id + "]").hide(1000)
// $("div[class="+id+"]").remove()
})
})
</script>
</body>
</html>
美化的话,做了一个删除的移除渐出效果,如图
以上是关于JQuery 动态留言的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。