时间戳

首页 > 解决方案 > 如何将课程添加到卡片并在外部单击后删除

javascript - 如何将课程添加到卡片并在外部单击后删除

问题描述

所以我有几张卡片将被克隆，我想在这些卡片内部单击时添加一个类，并在外部单击时替换它，我想保持某个名为元数据的类不变

我的小提琴 https://jsfiddle.net/abdotamer3/s57jauxw/27/

我的检测功能：

$(".card").on("click", function (e) {
    $(this).removeClass("viewItemInactive");
    $(this).addClass("viewItemActive");
});
$(document).on("click", function (e) {
    if ($(e.target).is(".card") === false) {
        $(".card").not(".MetaData").each(function() {
            $(this).removeClass("viewItemActive");
            $(this).addClass("viewItemInactive");
        });
    }
});

标签： javascripthtmljquerycss

解决方案

如果我理解正确，您可以在点击时添加这 2 行

$(".card").removeClass('randomClass');
$(this).addClass('randomClass');

因此，这将在您单击一张卡片时添加类，并在您单击另一张卡片时将其删除，并将其再次添加到您单击的卡片中。

所以点击会是这样的：

$(".card").on("click", function (e) {
    $(this).removeClass("viewItemInactive");
    $(this).addClass("viewItemActive");
    $(".card").removeClass('randomClass');
    $(this).addClass('randomClass');
});

推荐阅读