<think>我们要求实现的功能：1.当radio被选中时，其状态从未完成变为已完成，并且移动到未完成任务的下面（即所有未完成任务的后面，已完成任务的前面）2.提供三个筛选按钮：显示全部、显示已完成、显示未完成注意：这里要求的是“移到未完成的下面”，意味着已完成的任务应该放在所有未完成的任务之后。所以任务列表的顺序应该是：先显示所有未完成的任务（按原始顺序），然后显示已完成的任务（按完成时间顺序，即后完成的在后面？但题目要求是移到未完成的下面，所以每次完成的任务应该放在已完成任务的最上面？还是最下面？）。根据题目描述，我们理解为：当一个任务被选中时，它变为已完成，然后移动到所有未完成任务的后面（即紧接在最后一个未完成任务的后面），而其他已完成任务保持原顺序。但是，通常我们可能希望新完成的任务放在已完成任务的最前面（即最新完成的在最上面），但题目要求是“移到未完成的下面”，所以这里我们理解为：整个列表分为两部分：未完成任务（按原始顺序）和已完成任务（按完成顺序，新完成的放在已完成部分的最后？还是最前？）。题目没有明确，但根据“移到未完成的下面”以及“未完成的下面”可以理解为紧挨着未完成部分的后面。那么，如果多个任务完成，它们完成的顺序应该是按照完成的时间顺序排列，先完成的排在前面，后完成的排在后面？还是反过来？我们这样设计：-初始状态：所有任务都是未完成，按初始顺序显示。-当某个任务被选中（完成）时，它从未完成列表中移除，并
添加到已完成列表的末尾（即按照完成的时间顺序，先完成的排在已完成列表的前面，后完成的排在后面）。这样，在全部任务显示时，顺序是：未完成1,未完成2,... ,已完成1（最早完成的）,已完成2,...最后完成的。但是，题目要求是“移到未完成的下面”，所以只要把刚完成的任务放在所有未完成任务的后面即可。而其他已完成的任务，我们保持它们在列表中的相对顺序（即之前完成的那些任务，仍然在列表的后面部分，按照完成顺序排列，新完成的放在已完成任务的最后）。然而，在全部显示时，我们要求：未完成任务（按原始顺序） ->已完成任务（按完成的时间顺序，先完成的先出现，后完成的后出现）所以，当有一个任务被完成时，我们将其移动到所有未完成任务的后面，但放在所有已完成任务的前面？还是后面？题目没有明确，但根据“移到未完成的下面”以及“未完成的下面”就是紧接着未完成任务后面，那么它应该放在未完成任务的后面，同时放在已完成任务的前面（因为已完成任务已经在更后面了）？这样就会打乱已完成任务的顺序。因此，我们重新设计排序逻辑：-任务列表由两部分组成：未完成任务（按原始顺序）和已完成任务（按完成时间升序，即先完成的排在前面，后完成的排在后面）。-当一个任务被完成时，它从未完成部分移除，并
添加到已完成部分的最前面（表示最新完成的放在已完成的最上面）？还是最后面？但题目要求是“移到未完成的下面”，也就是整个列表的中间位置（未完成和已完成之间）？所以，我们每次完成的任务，应该放在未完成部分的后面，然后紧接着是已完成部分。而新完成的任务，我们放在已完成部分的最前面（这样它就在未完成部分的后面，已完成部分的最前面）？还是放在已完成部分的最后面（这样它就在整个列表的最后）？我们按照以下方式：-全部显示时：先显示所有未完成（按原始顺序），然后显示所有已完成（按完成时间从早到晚，即先完成的排在前面，后完成的排在后面）。这样，新完成的任务就会出现在已完成部分的最后，即整个列表的末尾。但是，这样用户可能看不到新完成的任务（因为如果列表很长，它跑到最后去了）。所以另一种方式：已完成部分按完成时间倒序（新完成的放在前面）。这样，新完成的任务就会紧接着未完成部分，然后依次是之前完成的。根据常见的任务管理应用，通常最新完成的任务会放在已完成部分的最上面（即紧接着未完成部分）。所以，我们选择：-已完成任务按完成时间倒序（新完成的在前，旧完成的在后）因此，我们的逻辑是：1.初始任务列表：所有任务都是未完成，按初始顺序显示。2.当任务被选中（完成）：a.将该任务
标记为已完成，并记录完成时间（可以用Date.now()）b.重新排序整个列表：先显示所有未完成（按初始顺序），然后显示所有已完成（按完成时间倒序）3.这样，新完成的任务就会出现在已完成部分的最前面（即紧接着未完成部分）但是，题目要求是“移到未完成的下面”，我们这样理解：未完成任务的下面紧接着就是最新完成的任务，然后依次是之前完成的任务。这样符合用户预期。实现步骤：-数据结构：每个任务是一个对象，包含id、
标题、描述、完成状态、完成时间（如果完成的话）-初始数据：任务数组-渲染函数：根据当前筛选条件（全部、已完成、未完成）来渲染任务列表。在全部显示时，排序规则：先未完成（按原始顺序），然后已完成（按完成时间倒序）注意：原始顺序我们可以用任务在数组中的初始顺序，但为了保持未完成任务的原始顺序，我们可以给每个任务一个初始
序号。但简单起见，我们假设初始数组顺序就是原始顺序。未完成的任务保持这个顺序，已完成的任务则按照完成时间倒序排列。具体代码步骤：1.HTML结构：包括三个按钮，任务列表容器2.CSS样式：区分已完成和未完成3.任务数据：数组，每个任务对象包含
属性：id, title, completed, completedTime（可选，用于排序）4.渲染函数：根据当前筛选条件（filter）和排序规则来渲染任务5.事件绑定：- radio的change事件：当选中时，将任务
标记为已完成，记录完成时间，然后重新渲染整个列表（按照排序规则）-三个按钮的点击事件：设置当前筛选条件，然后重新渲染列表（只显示符合条件的任务）我们使用
jQuery实现。下面给出完整代码：</think>下面我将提供一个完整的
jQuery实现，实现radio选中后状态变为"已完成"，并移动到未完成项的下方，同时提供筛选功能：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务状态管理器</title>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f0 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.app-container {
width: 100%;
max-width: 800px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.app-header {
background: linear-gradient(90deg, #3498db, #2c3e50);
color: white;
padding: 25px 30px;
text-align: center;
}
.app-header h1 {
font-size: 2.2rem;
margin-bottom: 10px;
}
.app-header p {
font-size: 1.1rem;
opacity: 0.9;
}
.filter-section {
padding: 20px;
background: #f8f9fa;
border-bottom: 1px solid #eaeaea;
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 25px;
border: none;
border-radius: 50px;
background: #e0e0e0;
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.filter-btn:hover {
trans
form: translateY(-3px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}
.filter-btn.active {
background: #3498db;
color: white;
box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
}
.tasks-container {
padding: 25px;
}
.task-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.task-item {
display: flex;
align-items: center;
padding: 18px 20px;
border-radius: 12px;
background: white;
border: 2px solid #e0e3e7;
transition: all 0.4s ease;
box-shadow: 0 3px 8px rgba(0,0,0,0.05);
position: relative;
}
.task-item:hover {
border-color: #b8c2cc;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
trans
form: translateY(-2px);
}
.task-item.checked {
border-color: #3498db;
background: linear-gradient(to right, #f8fdff, #e8f4fd);
}
.task-radio {
margin-right: 18px;
width: 22px;
height: 22px;
cursor: pointer;
accent-color: #3498db;
}
.task-content {
flex-grow: 1;
}
.task-title {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.task-description {
font-size: 0.95rem;
color: #7f8c8d;
line-height: 1.5;
}
.task-status {
padding: 6px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
margin-left: 15px;
min-width: 90px;
text-align: center;
transition: all 0.3s ease;
}
.status-incomplete {
background-color: #fff8e1;
color: #e65100;
border: 1px solid #ffe0b2;
}
.status-completed {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #c8e6c9;
}
.app-footer {
text-align: center;
padding: 20px;
background: #f8f9fa;
color: #7f8c8d;
font-size: 0.95rem;
border-top: 1px solid #eaeaea;
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: #7f8c8d;
}
.empty-state h3 {
margin-bottom: 15px;
color: #2c3e50;
}
@media (max-width: 600px) {
.task-item {
flex-direction: column;
align-items: flex-start;
}
.task-status {
margin-left: 0;
margin-top: 12px;
align-self: flex-end;
}
.filter-buttons {
flex-direction: column;
gap: 10px;
}
.filter-btn {
width: 100%;
}
}
</style>
</head>
<body>
<
div class="app-container">
<
div class="app-header">
<h1>任务状态管理器</h1>
<p>选中任务会自动
标记为已完成并移动到未完成任务下方</p>
</
div>
<
div class="filter-section">
<
div class="filter-buttons">
<button class="filter-btn active" id="showAll">显示全部任务</button>
<button class="filter-btn" id="showCompleted">仅显示已完成</button>
<button class="filter-btn" id="showIncomplete">仅显示未完成</button>
</
div>
</
div>
<
div class="tasks-container">
<
div class="task-list" id="taskList">
<
div class="task-item">
<input type="radio" class="task-radio" name="task" id="task1" value="1">
<
div class="task-content">
<
div class="task-title">设计产品原型</
div>
<
div class="task-description">创建产品线框图和高保真原型</
div>
</
div>
<
div class="task-status status-incomplete">未完成</
div>
</
div>
<
div class="task-item">
<input type="radio" class="task-radio" name="task" id="task2" value="2">
<
div class="task-content">
<
div class="task-title">开发核心功能</
div>
<
div class="task-description">实现用户认证和支付模块</
div>
</
div>
<
div class="task-status status-incomplete">未完成</
div>
</
div>
<
div class="task-item">
<input type="radio" class="task-radio" name="task" id="task3" value="3">
<
div class="task-content">
<
div class="task-title">编写测试用例</
div>
<
div class="task-description">为所有功能模块创建测试用例</
div>
</
div>
<
div class="task-status status-incomplete">未完成</
div>
</
div>
<
div class="task-item">
<input type="radio" class="task-radio" name="task" id="task4" value="4">
<
div class="task-content">
<
div class="task-title">用户验收测试</
div>
<
div class="task-description">与客户一起进行UAT测试</
div>
</
div>
<
div class="task-status status-incomplete">未完成</
div>
</
div>
<
div class="task-item">
<input type="radio" class="task-radio" name="task" id="task5" value="5">
<
div class="task-content">
<
div class="task-title">部署到生产环境</
div>
<
div class="task-description">完成最终部署和上线</
div>
</
div>
<
div class="task-status status-incomplete">未完成</
div>
</
div>
</
div>
</
div>
<
div class="app-footer">
<p>使用
jQuery实现的状态管理 | 选中任务后状态变更并自动排序</p>
</
div>
</
div>
<script>
$(document).ready(function() {
// 更新任务状态显示
function updateTaskStatus() {
$('.task-item').
each(function() {
const $item = $(this);
const $radio = $item.find('.task-radio');
const $status = $item.find('.task-status');
if ($radio.is(':checked')) {
$item.
addClass('checked');
$status.text('已完成').removeClass('status-incomplete').
addClass('status-completed');
} else {
$item.removeClass('checked');
$status.text('未完成').removeClass('status-completed').
addClass('status-incomplete');
}
});
}
// 初始更新状态
updateTaskStatus();
// 1. 当radio被选中时
$('.task-radio').change(function() {
if ($(this).is(':checked')) {
const $taskItem = $(this).closest('.task-item');
// 更新状态显示
$taskItem.
addClass('checked');
$taskItem.find('.task-status')
.text('已完成')
.removeClass('status-incomplete')
.
addClass('status-completed');
//
添加移动动画效果
$taskItem.animate({
opacity: 0.5,
marginLeft: '30px'
}, 300, function() {
// 找到所有未完成的任务
const $uncheckedItems = $('.task-item').not('.checked');
// 如果存在未完成项，则移动到最后一个未完成项后面
if ($uncheckedItems.length > 0) {
$taskItem.insertAfter($uncheckedItems.last());
} else {
// 如果没有未完成项，则移动到列表顶部
$taskItem.prependTo('#taskList');
}
// 完成动画
$taskItem.animate({
opacity: 1,
marginLeft: '0'
}, 300);
});
}
});
// 2. 筛选按钮功能
$('#showAll').click(function() {
$('.filter-btn').removeClass('active');
$(this).
addClass('active');
$('.task-item').show();
});
$('#showCompleted').click(function() {
$('.filter-btn').removeClass('active');
$(this).
addClass('active');
$('.task-item').hide();
$('.task-item.checked').show();
});
$('#showIncomplete').click(function() {
$('.filter-btn').removeClass('active');
$(this).
addClass('active');
$('.task-item').hide();
$('.task-item').not('.checked').show();
});
// 3.
添加点击任务项也能触发radio的功能
$('.task-item').click(function(e) {
// 排除点击radio本身
if ($(e.target).is('input')) return;
const $radio = $(this).find('.task-radio');
$radio.prop('checked', true).trigger('change');
});
// 4.
添加新任务按钮（示例）
$('#showIncomplete').after('<button class="filter-btn" id="addTask">+
添加新任务</button>');
$('#addTask').click(function() {
const newId = $('.task-radio').length + 1;
const $newTask = $(`
<
div class="task-item">
<input type="radio" class="task-radio" name="task" id="task${newId}" value="${newId}">
<
div class="task-content">
<
div class="task-title">新任务 ${newId}</
div>
<
div class="task-description">点击编辑任务描述</
div>
</
div>
<
div class="task-status status-incomplete">未完成</
div>
</
div>
`);
//
添加到列表顶部
$('#taskList').prepend($newTask);
// 更新按钮状态
$('.filter-btn').removeClass('active');
$('#showAll').
addClass('active');
// 显示所有任务
$('.task-item').show();
});
});
</script>
</body>
</html>
```
### 功能说明
1. **核心功能实现**：
- 当radio被选中时，任务状态从"未完成"变为"已完成"
- 已完成的任务自动移动到所有未完成任务的下方
- 提供三种筛选视图：全部任务/仅已完成/仅未完成
2. **UI/UX设计**：
- 现代化卡片式设计，带悬停效果
- 状态颜色区分（已完成-绿色，未完成-橙色）
- 平滑的动画过渡效果
- 响应式布局（适配移动设备）
- 渐变背景和阴影效果增强视觉体验
3. **交互细节**：
- 点击整个任务区域即可选中radio
- 移动过程有半透明和位移动画
- 按钮有激活状态视觉反馈
-
添加新任务功能演示
### 代码解释
#### 1. 状态更新函数
```javascript
function updateTaskStatus() {
$('.task-item').
each(function() {
const $item = $(this);
const $radio = $item.find('.task-radio');
const $status = $item.find('.task-status');
if ($radio.is(':checked')) {
$item.
addClass('checked');
$status.text('已完成').removeClass('status-incomplete').
addClass('status-completed');
} else {
$item.removeClass('checked');
$status.text('未完成').removeClass('status-completed').
addClass('status-incomplete');
}
});
}
```
- 遍历所有任务项
- 检查radio是否被选中
- 更新CSS类和状态文本
-
添加/移除"checked"类用于样式变化
#### 2. Radio选中处理
```javascript
$('.task-radio').change(function() {
if ($(this).is(':checked')) {
const $taskItem = $(this).closest('.task-item');
// 更新状态显示
$taskItem.
addClass('checked');
$taskItem.find('.task-status')
.text('已完成')
.removeClass('status-incomplete')
.
addClass('status-completed');
//
添加移动动画效果
$taskItem.animate({
opacity: 0.5,
marginLeft: '30px'
}, 300, function() {
// 找到所有未完成的任务
const $uncheckedItems = $('.task-item').not('.checked');
// 如果存在未完成项，则移动到最后一个未完成项后面
if ($uncheckedItems.length > 0) {
$taskItem.insertAfter($uncheckedItems.last());
} else {
// 如果没有未完成项，则移动到列表顶部
$taskItem.prependTo('#taskList');
}
// 完成动画
$taskItem.animate({
opacity: 1,
marginLeft: '0'
}, 300);
});
}
});
```
- 当radio被选中时触发
- 更新任务状态为"已完成"
- 使用
jQuery动画实现平滑过渡
- 移动到所有未完成任务的后面
- 如果没有未完成项，则移动到列表顶部
#### 3. 筛选功能实现
```javascript
$('#showAll').click(function() {
$('.filter-btn').removeClass('active');
$(this).
addClass('active');
$('.task-item').show();
});
$('#showCompleted').click(function() {
$('.filter-btn').removeClass('active');
$(this).
addClass('active');
$('.task-item').hide();
$('.task-item.checked').show();
});
$('#showIncomplete').click(function() {
$('.filter-btn').removeClass('active');
$(this).
addClass('active');
$('.task-item').hide();
$('.task-item').not('.checked').show();
});
```
- 显示全部：显示所有任务项
- 仅显示已完成：隐藏所有未完成项
- 仅显示未完成：隐藏所有已完成项
- 更新按钮激活状态
#### 4. 任务点击处理
```javascript
$('.task-item').click(function(e) {
// 排除点击radio本身
if ($(e.target).is('input')) return;
const $radio = $(this).find('.task-radio');
$radio.prop('checked', true).trigger('change');
});
```
- 允许点击整个任务区域选中radio
- 排除直接点击radio的情况
- 触发change事件以执行状态更新和移动逻辑
### 使用场景
1. **任务管理系统**：跟踪任务完成状态
2. **待办事项列表**：管理个人日常任务
3. **调查问卷**：记录用户选择的选项
4. **工单系统**：跟踪问题解决状态
5. **项目进度跟踪**：可视化团队任务完成情况
### 扩展功能建议
1. **持久化存储**：使用localStorage保存任务状态
2. **任务编辑**：双击任务
标题进行编辑
3. **拖拽排序**：
添加拖拽重新排序功能
4. **分类
标签**：为任务
添加优先级或分类
标签
5. **任务搜索**：
添加搜索框过滤任务
本文介绍了一种使用jQuery为页面中所有section元素动态添加类名的方法。通过$.each循环结合匿名函数的方式，实现了根据元素索引为每个section元素添加唯一的类名，方便进行进一步的样式定制和操作。
扫一扫
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
