jquery数据操作记录时间线

### 使用 jQuery 进行数据操作并记录时间线

为了实现通过 jQuery 来进行数据操作以及构建一个简单的时间线功能，可以创建一系列函数来处理日期的选择和显示。下面是一个基于给定的代码片段[^1]扩展的例子。

#### 创建 HTML 结构
首先定义好页面上的基本结构，包括用于展示可选日期链接的部分和用来呈现已选择日期作为时间线条目的区域：

<div id="dates-div">
    <!-- 假设这里有一些带有特定类名 'date-link' 的 a 标签 -->
</div>
<ul id="timeline"></ul>

#### 编写 JavaScript (jQuery)

接下来编写一段脚本来动态更新所选中的日期，并将其添加到时间线上去：

$(document).ready(function() {
    var settings = {
        datesDiv: '#dates-div',
        datesSelectedClass: 'selected-date'
    };

    function addTimelineEntry(dateText) {
        $('#timeline').append(
            '<li>' + dateText + '</li>'
        );
    }

    $(settings.datesDiv).on('click', '.date-link', function(event){
        event.preventDefault();
        
        // 移除之前选定状态
        $('.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass);
        
        // 更新当前被点击项的状态
        $(this).addClass(settings.datesSelectedClass);

        // 获取新选中的日期文本
        var selectedDateElement = $(settings.datesDiv).find('.' + settings.datesSelectedClass)[0];
        var selectedDateText = $(selectedDateElement).text();

        // 将其加入时间线中
        addTimelineEntry(selectedDateText);
    });
});

此段代码实现了当用户单击某个代表具体日期的 `<a>` 链接时，该链接会被标记为“已选”，同时会把对应的日期文字追加至下方无序列表内形成一条新的时间线项目。