如何在JavaScript中使用data-attributes在SweetAlert2展示记忆游戏配对卡片图片

data attribute 基础说明 #

你代码中用到的data-framework是HTML提供的自定义数据属性，规则是data-开头后跟自定义属性名，作用是给DOM元素绑定额外的自定义数据，JS可以直接通过元素的dataset属性读取对应值，比如你代码中firstCard.dataset.framework就是拿到对应.memory-card元素上data-framework属性的值，你用它存卡片的类型标识，相同值判定为一对的逻辑是正确的。

功能实现修改步骤 #

• 第一步：先补引SweetAlert2依赖，在HTML的<head>标签末尾添加如下引入，否则Swal对象会报错

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

• 第二步：修改checkForMatch函数中匹配成功的分支逻辑，从配对成功的卡片里提取正面图片地址，传入SweetAlert2配置项即可，替换你原有匹配成功未通关分支的代码：

} else {
  setTimeout(function(){
    // 提取配对成功的卡片正面图片信息
    const matchedImg = firstCard.querySelector('.front-face');
    Swal.fire({
      imageUrl: matchedImg.src,
      imageWidth: 400,
      imageHeight: 200,
      imageAlt: matchedImg.alt,
      title: '配对成功！',
      confirmButtonText: '继续游戏',
      allowOutsideClick: false,
    }).then(() => {
      time()
    })
  }, 1000);
  clearInterval(timerCtrl)
}

• 可选优化：你当前的洗牌函数写死了随机数最大值12，后续增减卡片数量时会出现排序异常，可以改成动态取卡片总数：

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * cards.length)
    card.style.order = randomPos
  })
})()

修改完成后即可实现每次配对成功，弹窗自动展示对应配对卡片的图片，点击确认按钮后恢复计时器继续游戏的效果。

内容的提问来源于stack exchange，提问作者Vasco Wayne