在JavaScript中索引HTML div类

我试图使用data属性比较不同div类的两个值。我有多个类似于这两个的div类，它们都具有不同的数据值：

<div class="card" data-value=38>
    <img class ="front-face" src= "PNG/QH.png"/>
  </div>

  <div class="card" data-value=39>
    <img class ="front-face" src= "PNG/KH.png"/>
  </div>

cards是一个数组，包含我所有的div类。我收到的一个错误告诉我，indexOf在这里不是一个可用的函数。我认为这可能是因为div类实际上不是数组的一部分，我需要一个不同的方法来查找某物的“值”，而不是“索引”

---

例如，如果一行卡片变成2D、7S、9D、8H、3D，用户可以单击3D作为第一张卡片，单击7S作为第二张卡片。该函数将验证3D的值是否大于2D，并将交换3D和7S的位置。

代码的问题是querySelectorAll（）返回一个数组，其行为类似于数组，但实际上不是数组

GetElementsByCassName（）也会出现同样的问题。该函数返回一个HTMLCollection，其行为类似于数组，但不包括所有原型功能，因为它不是真正的数组

因此，您有几个选项来获取索引，在获取索引之后，您可以获取它之前的元素

使用call或apply欺骗数组方法

`Array.prototype.indexOf.call(cards, second)`

手动迭代

`let selectedIndex = 0;
for(let i =0; i < cards.length; i++){
  if(cards[i] === second){
    selectedIndex = i;
  }
};
console.log(selectedIndex)`

`selectedIndex=0；
for（设i=0；i

使用卡片节点列表创建阵列

const cards=document.queryselectoral（'.card'）；
const cardsArray=Array.from（卡片）
如果（firstCard.dataset.value==
cardsArray[cardsArray.indexOf（secondCard）-1].dataset.value）

---

使用任何库来选择返回数组的元素，如jQuery

代码的问题是querySelectorAll（）返回一个行为类似于数组但实际上不是数组的元素

`let selectedIndex = 0;
for(let i =0; i < cards.length; i++){
  if(cards[i] === second){
    selectedIndex = i;
  }
};
console.log(selectedIndex)`

GetElementsByCassName（）也会出现同样的问题。该函数返回一个HTMLCollection，其行为类似于数组，但不包括所有原型功能，因为它不是真正的数组

因此，您有几个选项来获取索引，在获取索引之后，您可以获取它之前的元素

使用call或apply欺骗数组方法

`Array.prototype.indexOf.call(cards, second)`

手动迭代

`let selectedIndex = 0;
for(let i =0; i < cards.length; i++){
  if(cards[i] === second){
    selectedIndex = i;
  }
};
console.log(selectedIndex)`

`selectedIndex=0；
for（设i=0；i

使用卡片节点列表创建阵列

const cards=document.queryselectoral（'.card'）；
const cardsArray=Array.from（卡片）
如果（firstCard.dataset.value==
cardsArray[cardsArray.indexOf（secondCard）-1].dataset.value）

---

使用任何库来选择返回数组的元素，正如jQuery

我制作了一个自动生成正方形的小片段，可以按照您的建议移动。你可以去看看。如果有什么不好，你可能会指出，也许我忘了什么

`let selectedIndex = 0;
for(let i =0; i < cards.length; i++){
  if(cards[i] === second){
    selectedIndex = i;
  }
};
console.log(selectedIndex)`

让cardsArray=[{
“价值”：7，
“颜色”：“红色”
}, {
“价值”：6，
“颜色”：“黄色”
}, {
“价值”：5，
“颜色”：“绿色”
}, {
“价值”：4，
“颜色”：“红色”
}, {
“价值”：3，
“颜色”：“黄色”
}, {
“价值”：2，
“颜色”：“绿色”
}, {
“价值”：1，
“颜色”：“绿色”
}]
//函数自动生成一些正方形
函数drawSquares（）{
设squaresParent=$（“#squaresParent”）；
squaresParent.empty（）；
设lCALen=cardsArray.length；
对于（设i=0；i0）
BeforeCondCardIndex=secondCardIndex-1；
设firstCard=cardsArray[firstCardIndex]；
设secondCard=cardsArray[secondCardIndex]；
let beforeSecond=cardsArray[beforeSecondscardindex]；
if（firstCard.value-1==beforesond.value）{
设temp=firstCard；
cardsArray[firstCardIndex]=第二张卡；
cardsArray[secondCardIndex]=温度；
drawSquares（）；
赋值事件（）；
}否则{
fC.removeClass（“选定”）；
sC.removeClass（“选定”）；
}
//控制台日志（“正在退出…”）；
}
函数赋值事件（）{
$（“.card”）。单击（函数（）{
//控制台日志（“点击卡片”）；
如果（！firstCard）{
firstCard=$（此）；
firstCard.addClass（“选定”）；
返回；
}
如果（！第二张卡）{
第二张卡=$（本）；
secondCard.addClass（“选定”）；
}
比较移动（第一张卡、第二张卡）；
firstCard=null；
secondCard=null；
});
}

.card{
宽度：50px；
高度：50px；
边界半径：10px；
边框：1px纯黑；
显示：内联块；
文本对齐：居中；
保证金：5px；
}
.选定{
边框：3倍纯黑；
}
身体{
背景色：#ABCDEF；
}

---

我制作了一个自动生成正方形的小片段，可以按照您的建议移动。你可以去看看。如果有什么不好，你可能会指出，也许我忘了什么

让cardsArray=[{
“价值”：7，
“颜色”：“红色”
}, {
“价值”：6，
“颜色”：“黄色”
}, {
“价值”：5，
“颜色”：“绿色”
}, {
“价值”：4，
“颜色”：“红色”
}, {
“价值”：3，
“颜色”：“黄色”
}, {