我正在尝试使用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>
每个div类也将使用cards.style.order接收唯一的订单
在JS函数中，用户将选择两张卡（firstCard，secondCard），并且该函数应检查firstCard的值是否比第二张多1阶的卡的值大一。
这是我一直在尝试使用的代码：
const cards = document.querySelectorAll('.card');
if(firstCard.dataset.value === cards[cards.indexOf(secondCard)-1].dataset.value)
卡是容纳我所有div类的数组。我收到的一个错误告诉我indexOf在这里不是可用的函数。我认为这可能是因为div类实际上不是数组的一部分，并且我需要一种不同的方法来查找某物的“值”而不是“索引”。
例如，如果一行纸牌变为2D，7S，9D，8H，3D，则用户可以为firstCard单击3D，为secondCard单击7S。该函数将验证3D的值是否比2D大1，并将交换3D和7S的位置。
最佳答案
我用自动生成的正方形制作了小片段，可以按照您的建议移动正方形。您可能会检查出来。如果有问题，您可能会指出，也许我忘记了。
let cardsArray = [{
"value": 7,
"color": "red"
}, {
"value": 6,
"color": "yellow"
}, {
"value": 5,
"color": "green"
}, {
"value": 4,
"color": "red"
}, {
"value": 3,
"color": "yellow"
}, {
"value": 2,
"color": "green"
}, {
"value": 1,
"color": "green"
}]
// Function to automatically generate some squares
function drawSquares() {
let squaresParent = $("#squaresParent");
squaresParent.empty();
let lCALen = cardsArray.length;
for (let i = 0; i < lCALen; ++i) { //make it efficient for checking length
// Creating a text object for display purposes only
let newText = $('<p>').append(cardsArray[i].value);
// Creating a new card
let newCard = $('<div>').attr({
'data-value': cardsArray[i].value,
'style': 'background-color:' + cardsArray[i].color,
'index': i,
'class': 'card'
}).append(newText);
squaresParent.append(newCard);
}
}
drawSquares();
assignEvents();
let firstCard = null;
let secondCard = null;
function compareAndMove(fC, sC) {
//console.log("Switching...");
let firstCardIndex = fC.attr("index");
let secondCardIndex = sC.attr("index");
let beforeSecondCardIndex = 0;
if (secondCardIndex > 0)
beforeSecondCardIndex = secondCardIndex - 1;
let firstCard = cardsArray[firstCardIndex];
let secondCard = cardsArray[secondCardIndex];
let beforeSecond = cardsArray[beforeSecondCardIndex];
if (firstCard.value - 1 === beforeSecond.value) {
let temp = firstCard;
cardsArray[firstCardIndex] = secondCard;
cardsArray[secondCardIndex] = temp;
drawSquares();
assignEvents();
} else {
fC.removeClass("selected");
sC.removeClass("selected");
}
//console.log("Exiting...");
}
function assignEvents() {
$(".card").click(function() {
//console.log("Card clicked");
if (!firstCard) {
firstCard = $(this);
firstCard.addClass("selected");
return;
}
if (!secondCard) {
secondCard = $(this);
secondCard.addClass("selected");
}
compareAndMove(firstCard, secondCard);
firstCard = null;
secondCard = null;
});
}.card {
width: 50px;
height: 50px;
border-radius: 10px;
border: 1px solid black;
display: inline-block;
text-align: center;
margin: 5px;
}
.selected {
border: 3px solid black;
}
body {
background-color: #ABCDEF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="squaresParent"></div>
</body>
</html>关于javascript - 在JavaScript中索引HTML div类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52374307/