用html和css以及jQuery编写一个简单的留言板页面, 动态更新内容与删除操作。 ②单击“发布”按钮,显示用户发布的留言内容。 在每个留言板提供一个“删除”链接,用来删除留言,并显示更新后的同容
时间: 2024-02-18 11:05:54 浏览: 22
好的,我会尽力回答你的问题。
首先,我们需要一个 HTML 页面来展示留言板。以下是一个简单的留言板页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<style>
.message {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
}
.delete {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br><br>
<button id="submit">发布</button>
</form>
<div id="messages"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
在上面的代码中,我们使用了 HTML 表单来获取用户输入的姓名和留言内容,并使用了一个按钮来提交表单。我们还添加了一个 `div` 元素来展示留言内容。注意我们引入了 jQuery 库和一个 `script` 标签,后面我们会在 `script.js` 文件中编写 JavaScript 代码来实现留言板的功能。
接下来,我们需要编写 JavaScript 代码来实现动态更新留言内容和删除操作。以下是 `script.js` 文件中的代码示例:
```javascript
$(document).ready(function() {
// 点击“发布”按钮时触发的事件
$('#submit').click(function(event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 获取用户输入的姓名和留言内容
var name = $('#name').val();
var message = $('#message').val();
// 创建一个新的留言对象
var newMessage = $('<div class="message"><strong>' + name + ':</strong>' + message + ' <span class="delete">删除</span></div>');
// 将新的留言对象添加到留言板中
$('#messages').append(newMessage);
// 清空用户输入的姓名和留言内容
$('#name').val('');
$('#message').val('');
});
// 点击“删除”链接时触发的事件
$('#messages').on('click', '.delete', function() {
// 删除当前的留言对象
$(this).parent().remove();
});
});
```
在上面的代码中,我们使用了 jQuery 库来简化 JavaScript 代码。当用户点击“发布”按钮时,我们获取用户输入的姓名和留言内容,并创建一个新的留言对象。然后,我们将新的留言对象添加到留言板中,并清空用户输入的姓名和留言内容。
当用户点击“删除”链接时,我们删除当前的留言对象。注意我们使用了事件委托来处理“删除”链接的点击事件,这样可以使新添加的留言对象也能响应该事件。
这样,我们就完成了一个简单的留言板页面的制作。希望这个示例能对你有所帮助!