点击UL列表中A标签实现数组元素的添加与移除（jQuery实现）

我来帮你完善这个功能~ 核心思路是每次点击时先判断当前链接的文本是否已经在数组里，再决定是添加还是移除。另外还要注意处理文本的空白字符，避免原文本里的空格导致判断失误。

完整实现代码 #

var arr = [];
$('ul a').on('click', function(e) {
    // 阻止链接默认跳转（如果你的a标签是带href的实际链接，建议加上这个）
    e.preventDefault();
    // 获取并清理文本内容（去除前后多余空白）
    var text = $(this).text().trim();
    // 查找文本在数组中的索引位置
    var itemIndex = arr.indexOf(text);
    
    if (itemIndex !== -1) {
        // 文本已存在，从数组中移除该元素
        arr.splice(itemIndex, 1);
        console.log('已移除:', text, '当前数组内容:', arr);
    } else {
        // 文本不存在，添加到数组中
        arr.push(text);
        console.log('已添加:', text, '当前数组内容:', arr);
    }
});

关键代码说明 #

• e.preventDefault()：如果你的<a>标签带有href属性，点击时会触发页面跳转，这个方法可以阻止默认行为，让我们的数组操作不受影响，按需取舍即可。
• trim()：清理文本前后的空白字符，避免示例中item first 末尾的空格导致判断错误，确保文本匹配的准确性。
• indexOf(text)：用来查找目标文本在数组中的位置，返回-1代表文本不在数组里，否则返回对应的索引值。
• splice(itemIndex, 1)：根据找到的索引从数组中移除元素，第二个参数1表示只移除当前找到的这一个元素，避免误删其他内容。

可选视觉反馈优化 #

如果想给用户更直观的操作反馈，可以在判断逻辑里加上样式切换：

if (itemIndex !== -1) {
    arr.splice(itemIndex, 1);
    $(this).removeClass('selected').addClass('unselected');
} else {
    arr.push(text);
    $(this).removeClass('unselected').addClass('selected');
}

然后配合CSS定义selected和unselected类的样式，比如改变文字颜色或背景色，让用户一眼就能分辨当前链接的状态。

内容的提问来源于stack exchange，提问作者sunil kumar