在JavaScript中索引HTML div类
在JavaScript中索引HTML div类
提问于 2018-09-18 03:10:03
我尝试使用data属性比较不同div类的两个值。我有多个这样的div类，它们都有不同的data-vale：
<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的值是否比顺序比secondCard多1的卡的值大1。
下面是我一直在尝试使用的代码：
const cards = document.querySelectorAll('.card');
if(firstCard.dataset.value === cards[cards.indexOf(secondCard)-1].dataset.value)cards是一个存放我所有div类的数组。我收到的一个错误告诉我，indexOf在这里不是一个可用的函数。我想这可能是因为div类实际上并不是数组的一部分，我需要一个不同的方法来找到某个东西的'value‘而不是'index of’。
例如，如果一行卡片为2D、7S、9D、8H、3D，则用户可以单击3D(对于firstCard )和7S(对于secondCard )。该函数将验证3D的值是否大于2D，并交换3D和7S的位置。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-18 04:18:17
我用自动生成的方块制作了我的小片段，可以按照你的建议移动。你可以去看看。如果有什么不好，你可能会指出，也许我忘了什么。
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>
Stack Overflow用户
发布于 2018-09-18 05:07:00
我想你正在寻找这样的东西..
var currentCard = $(".cards").first();
var currentCardInd = $(currentCard).attr("index");
$(".cards").on("click", function(event){
if(currentCard && parseInt(currentCardInd) < parseInt($(this).attr("index"))){
currentCard.attr("index", $(this).attr("index"));
$(this).attr("index", currentCardInd.toString());
$(this).swapWith(currentCard);
currentCard = $(".cards[index='"+$(this).attr("index")+"']").next();
currentCardInd = $(currentCard).attr("index");
}
});
jQuery.fn.swapWith = function(_with) {
return this.each(function() {
var copyWith = $(_with).clone(true);
var copyOrig = $(this).clone(true);
$(_with).replaceWith(copyOrig);
$(this).replaceWith(copyWith);
});
};.cards{
padding:10px;
background-color:lightblue;
display:inline-block;
cursor:pointer;
border-radius:5px;
}
#card-7S{
background-color:lightgreen;
}
#card-9D{
background-color:lightyellow;
}
#card-8H{
background-color:lightgray;
}
#card-3D{
background-color:lightpink;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="card-2d" class="cards" index="2">2D</div>
<div id="card-7S" class="cards" index="4">7S</div>
<div id="card-9D" class="cards" index="7">9D</div>
<div id="card-8H" class="cards" index="10">8H</div>
<div id="card-3D" class="cards" index="15">3D</div>
</div>
你也可以在这里查看..https://jsfiddle.net/nimittshah/7z3y8mb5/
Stack Overflow用户
发布于 2018-09-18 04:31:59
Array.from是获取元素数组的规范方法
<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>
<script>
const [first, second] = Array.from(document.querySelectorAll('.card'))
if (first.dataset.value === second.dataset.value) {
/* do your thing... */
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52374307
复制相关文章
相似问题