①编写一个简单的留言板页面 动态更新内容与删除操作。②单击发布按钮显示用户发布的留言内容。③在每个留言板提供一个删除链接用来删除留言并显示更新后的同容。 使用jQuery
实现：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="message_board.js"></script>
</head>
<body>
<h1>留言板</h1>
<div id="message_board">
<h2>留言列表</h2>
<ul id="message_list"></ul>
<div>
<label>姓名：</label>
<input type="text" id="name">
</div>
<div>
<label>留言内容：</label>
<textarea id="message"></textarea>
</div>
<button id="submit_message">发布</button>
</div>
</body>
</html>
JavaScript代码：
$(document).ready(function() {
var messages = [];
// 添加留言
$('#submit_message').click(function() {
var name = $('#name').val();
var message = $('#message').val();
if (name && message) {
messages.push({name: name, message: message});
updateMessageBoard();
$('#name').val('');
$('#message').val('');
}
});
// 删除留言
$(document).on('click', '.delete_message', function() {
var index = $(this).data('index');
messages.splice(index, 1);
updateMessageBoard();
});
// 更新留言板内容
function updateMessageBoard() {
$('#message_list').empty();
for (var i = 0; i < messages.length; i++) {
var message = messages[i];
var html = '<li><strong>' + message.name + '：</strong>' + message.message + ' <a href="#" class="delete_message" data-index="' + i + '">删除</a></li>';
$('#message_list').append(html);
}
}
});
说明：
- 首先定义一个空数组
messages，用于存放留言信息； - 绑定“发布”按钮的点击事件，在用户填写姓名和留言内容后，将信息添加到
messages数组中； - 绑定“删除”链接的点击事件，根据
data-index属性删除messages数组中相应的元素； - 定义
updateMessageBoard函数，用于更新留言板内容； - 在
updateMessageBoard函数中，首先清空留言板中的内容，然后遍历messages数组，生成HTML代码，并添加到留言板中； - 在HTML中，使用
<ul>元素显示留言列表，使用<input>和<textarea>元素获取用户输入的姓名和留言内容，使用<button>元素绑定“发布”按钮的点击事件； - 在JavaScript中，使用jQuery选择器获取HTML元素，并绑定事件处理函数。注意，删除留言的事件处理函数必须使用
$(document).on()方法绑定，因为删除链接是动态生成的，不能直接使用$('.delete_message').click()方法绑定
原文地址: https://www.cveoy.top/t/topic/feq9 著作权归作者所有。请勿转载和采集!