Vanilla JS记忆游戏：函数返回值存变量与直接调用结果不一致

嘿，这个问题我之前帮朋友排查过类似的，咱们一步步来捋清楚～

你说直接调用selected()能拿到所有点击过的卡片，但把返回值存到selectedCards变量里就只剩第一张，核心问题大概率出在函数的返回逻辑或者变量的赋值时机上，结合你给出的代码片段，我帮你拆解下可能的原因和解决办法：

可能的问题点 #

1. selected函数没有正确返回所有.open元素
   从你给出的代码片段看，函数里初始化了select数组，但没把document.querySelectorAll('.open')的结果塞进去，也没写return语句？如果是这样的话，函数默认返回undefined，但你说能拿到第一张，那大概率是你在函数里错误地只取了第一个匹配的元素（比如用了querySelector而不是querySelectorAll），或者只把当前点击的卡片push进了数组，而不是批量获取所有打开的卡片。

2. selectedCards变量只赋值了一次
   如果你是在页面加载初期就执行了const selectedCards = selected()，那这个变量只会保存那一刻页面上的.open元素快照——也就是第一次点击后只有第一张卡片，之后再点击其他卡片，selectedCards不会自动更新，因为它只是个静态数组，不是实时的引用。

解决办法 #

1. 修正selected函数，确保返回所有打开的卡片数组

document.querySelectorAll('.open')返回的是NodeList，我们需要把它转换成数组才能方便后续操作（比如判断长度、遍历等），所以函数可以简化成：

function selected() {
  // 用扩展运算符把NodeList转成数组，Array.from()也可以
  return [...document.querySelectorAll('.open')];
}

这样每次调用selected()，都会实时查询当前页面上所有带.open类的卡片，返回完整的数组。

2. 在每次点击卡片后重新获取最新的选中卡片

不要只给selectedCards赋值一次，而是在每次用户点击卡片时，都重新调用selected()来更新变量，比如：

// 给所有卡片绑定点击事件
document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', function() {
    // 根据你的游戏逻辑，添加.open类打开卡片
    this.classList.add('open');
    
    // 每次点击都重新获取最新的打开卡片数组
    const selectedCards = selected();
    
    // 现在selectedCards就是所有打开的卡片啦，可以在这里做匹配判断
    console.log('当前打开的卡片数量：', selectedCards.length);
  });
});

额外提醒 #

记忆游戏里通常会限制同时打开的卡片数量（比如最多2张），所以你可以在获取selectedCards后，判断它的长度：如果等于2，就检查两张卡片是否匹配，匹配的话保留打开状态，不匹配的话就移除.open类关闭卡片。

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