JavaScript记忆游戏toggleClass问题：点击卡片显示异常求助

嘿，我来帮你捋捋问题出在哪～你遇到的“点击卡片后内容以微小图标形式显示”的核心问题，是卡片HTML结构创建错误，再加上shuffle函数和点击事件处理里的小疏漏导致的，下面一步步拆解修复：

1. 卡片创建逻辑错误（最关键问题） #

你现在的代码是把Font Awesome的类名直接当成文本节点插入到<li>里了：

var text = document.createTextNode(item);
li.appendChild(text);

这就导致页面上的<li>里显示的是fa fa-diamond这类字符串，浏览器会把它们当成普通文本，自然只会显示成乱码一样的小符号，而不是真正的图标。

正确的做法是创建<i>元素，把类名赋值给它的class属性，再把<i>嵌套到<li>中：

// 先复制一份卡片数组（记忆游戏需要成对卡片）
var cardPairs = [...myCard, ...myCard];
// 洗牌后再创建卡片
var shuffledCards = shuffle(cardPairs);

shuffledCards.forEach(function(item) {
  var li = document.createElement("li");
  li.className = "card"; // 给li加基础类，方便样式控制
  var icon = document.createElement("i");
  icon.className = item; // 把Font Awesome类名绑定到i元素上
  li.appendChild(icon);
  document.getElementById("myUL").appendChild(li);
});

2. Shuffle函数的变量错误 #

你的shuffle函数里误用了未定义的array变量，全部替换成传入的参数myCard才能正常工作：

function shuffle(myCard) {
  var currentIndex = myCard.length, temporaryValue, randomIndex;
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = myCard[currentIndex];
    myCard[currentIndex] = myCard[randomIndex];
    myCard[randomIndex] = temporaryValue;
  }
  return myCard;
}

3. 点击事件的toggleClass实现错误 #

你现在用的target.children().toggle()是隐藏/显示子元素，而非切换类来控制显示。咱们需要通过CSS配合类切换来实现卡片内容的显示：

首先添加基础样式（示例）：

.card {
  width: 100px;
  height: 100px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 5px;
}
.card i {
  display: none; /* 默认隐藏图标 */
  font-size: 24px;
}
.card.open i {
  display: block; /* 添加open类后显示图标 */
}

然后修改点击事件处理函数，用toggleClass切换open类：

function handler(event) {
  var target = $(event.target);
  // 兼容点击li本身或内部i元素的情况
  var card = target.is("li") ? target : target.parent();
  card.toggleClass("open");
}

// 绑定点击事件
$(document).ready(function() {
  $("#myUL").on("click", handler);
});

这样修改后，点击卡片就会正确切换类，显示出正常的Font Awesome图标啦～

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