Question

我只使用vanilla javascript处理记忆游戏，下面的函数应该将所有打开的卡存储在Nodelist中，我想稍后变成一个数组。当我调用该函数时，使用selected（）;我得到了我点击的所有卡片，但是当我使用变量selectedCards时，它只给了我点击的第一张卡片。这是为什么？

function selected () {
let select = [];
//class = 'open' turns the card over in grid when clicked
if (document.querySelectorAll('.open')) {
    select.push((document.querySelectorAll('.open')));
};
return select;
};
let selectedCards = selected();

最终我想使用下面的函数检查selectedCards数组中的卡是否匹配。

function isMatch() {
   if (selectedCards[0].type === selectedCards[1].type) {
     function matched(){
       selectedCards[0].classList.add("match");
       selectedCards[1].classList.add("match");
       selectedCards[0].classList.remove("show", "open");
       selectedCards[1].classList.remove("show", "open");
       selectedCards = [];
     }
   }
};

我只学习了大约2周的javascript，所以现在甚至可以通过我创建的功能实现这一点？我不知道，任何帮助都非常感激！

Answer 1

您可以像这样将NodeList设置为数组。您可以看到selected()和selectedCards返回相同的结果。

＆＃13;

function selected () {
let select = [];
//class = 'open' turns the card over in grid when clicked
let sel = document.querySelector('.open');
  
if (sel) {
    select= [].slice.call(sel.querySelectorAll('.inner'));
};
return select;
};
let selectedCards = selected();
console.log(selected());
console.log(selectedCards);

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="open">
  <div class="inner">
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
  </div>
</div>
</body>
</html>

＆＃13;

在变量中存储返回值并不能给我与通过名称调用函数相同的功能

1 个答案: