如何为card元素添加点击激活类，点击外部移除且保留metadata类不变

架构老林

2026-9-29

问题核心原因

你的代码存在3个逻辑错误导致需求无法实现：

卡片点击事件没有阻止冒泡，点击卡片后事件会向上传递到document，触发外部点击的重置逻辑，导致刚添加的激活类被覆盖
外部点击的判断逻辑有缺陷：仅判断点击目标本身是不是.card，如果点击的是卡片内部的子元素，就会被误判为点击了卡片外部，触发重置
类名大小写不匹配：需求要求保留metadata类不修改，你代码里写的选择器是.MetaData，大小写不一致会导致过滤规则失效

修正后代码

$(".card").on("click", function (e) {
    // 阻止事件冒泡到document，避免触发外部重置逻辑
    e.stopPropagation();
    // 重置所有非metadata类的卡片为未激活状态
    $(".card").not(".metadata").removeClass("viewItemActive").addClass("viewItemInactive");
    // 给当前点击的卡片设置激活状态
    $(this).removeClass("viewItemInactive").addClass("viewItemActive");
});

$(document).on("click", function (e) {
    // 仅当点击位置不属于任何卡片内部时，才重置所有非metadata类的卡片
    if ($(e.target).closest(".card").length === 0) {
        $(".card").not(".metadata").removeClass("viewItemActive").addClass("viewItemInactive");
    }
});