Question

我正在创建一个记忆游戏，当我单击游戏卡片时，会向其中添加class。我希望在翻转两张卡时删除班级。问题是我无法删除/替换我动态创建的class。尝试过classList.remove（）/ classList.add（）...

const titleId = document.querySelector(".page-header");
const cardId = document.querySelectorAll(".card");
var cardCounter = 0;

// give the clicked card a class of .card-flipped
// when 2 cards are flipped, activate the function flipCardBack
for (let i = 0; i < cardId.length; i++) {
cardId[i].addEventListener('click', function () {
    cardId[i].classList.add("card-fliped");
    cardCounter ++;

    if (cardCounter === 2){
        cardCounter = 0;
        setTimeout(flipCardBack, 2500);
        }

    });
}

// trying to remove the added class .card-flipped (currently not working)

function flipCardBack() {
let dynamicClassSelector = document.querySelectorAll(".card-fliped");
dynamicClassSelector.classList.remove("card-flipped");
}

我收到的错误消息如下：

未捕获的TypeError：无法读取未定义的属性“删除” 在flipCardBack上。

Answer 1

querySelectorAll返回一个元素列表，如果要删除该类，则必须遍历此列表并从每个元素中删除该类，下面是一个示例：

function flipCardBack() {
  document.querySelectorAll(".card-fliped").forEach(element => {
    element.classList.remove("card-fliped");
  })
}

正如@Andreas所提到的，您还有一个错字，您同时使用了card-fliped和card-flipped（有一个和两个p）。

Answer 2

添加课程时，您拼写了flipped：）

应该是

cardId[i].classList.add("card-flipped");

不是

cardId[i].classList.add("card-fliped");

哦，当您查询文档时-您需要使用相同的拼写-甚至可能将该字符串提取为常量，因此请确保使用相同的字符串;）

此外，querySelectorAll将返回匹配的元素列表，因此您将希望在每个/第一个集合上执行此操作。

如何使用纯JavaScript再次删除该类

2 个答案: