我正试图只使用javascript来洗牌(点击按钮(同一容器中的多张牌。他们基本上每次我点击按钮都需要改变位置。
我的想法是制作一个函数，点击后将它们的位置设置为绝对位置，顶部和左侧为0，这样它们就会全部重叠。我已经做到了，但我不知道该怎么做，下一步该怎么做。也许这甚至不是一个好方法。所以，如果有更简单的解决方案，请随时与我分享。
我几个月前就开始学习javascript了，所以我的知识还是相当基础的。
欢迎任何帮助
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>
<body>
<div class="card-container">
<div class="first-card card" data-value="1">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card card" data-value="2">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="third-card card" data-value="3">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="fourth-card card" data-value="4">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="first-card card" data-value="1">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card card" data-value="2">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="third-card card" data-value="3">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="fourth-card card" data-value="4">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
</div>
<div class="button-container">
<div>
<button class="flip-all-cards">FLIP ALL</button>
</div>
<div>
<button class="position-button">SHUFFLE CARDS</button>
</div>
</div>
<script src="memory.js"></script>
</body>
</html>
javascript
document.querySelectorAll(".first-card").forEach(container => {
container.addEventListener('click',flipCard)
})
document.querySelectorAll(".second-card").forEach(container => {
container.addEventListener('click',flipCard)
})
document.querySelectorAll(".third-card").forEach(container => {
container.addEventListener('click',flipCard)
})
function flipCard(card){
card.currentTarget.classList.toggle("flip")
}
/*-------------------------------------------------------------------------------*/
document.querySelector(".flip-all-cards").addEventListener("click",function(){
document.querySelectorAll(".card").forEach(container => {
container.classList.toggle("flip")
})
})
document.querySelector(".position-button").addEventListener("click",function(){
document.querySelectorAll('.card').forEach(card => {
card.style.position = "absolute"
card.style.top = "0"
card.style.left = "0"
})
})
css
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
padding: 100px;
}
.card-container{
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
position: relative;
height: 700px;
}
.first-card, .second-card, .third-card, .fourth-card{
width: 100px;
height: 150px;
border: 3px solid black;
border-radius: 10px;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: 10px;
}
.flip{
transform: rotateY(180deg);
}
/*
.test-div:hover {
transform: rotateY(180deg);
}*/
.front, .back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
.first-card .front{
background: lightblue;
width: 100%;
height: 100%;
}
.second-card .front{
background: red;
width: 100%;
height: 100%;
}
.third-card .front{
background:lime;
width: 100%;
height: 100%;
}
.fourth-card .front{
background:yellow;
width: 100%;
height: 100%;
}
.first-card .back,.second-card .back, .third-card .back, .fourth-card .back{
background: black;
width: 100%;
height: 100%;
}
这是我到目前为止的代码
您可以考虑在JS中编写一个具有所有可能颜色的数组，然后使用该数组中的颜色更改每个div的前颜色，而不是尝试在DOM中重新排列卡片。
然后，您可以使用类似于此处的shuffle函数来重新排列数组中颜色的顺序。