javascript - 用 JavaScript 对角线重新定位正方形
问题描述
我需要通过切换它们的左值和顶部值来对称地重新定位 5 个方格。它仅在 JavaScript 中，通过函数 init() 和 reposition()。在 init() 中，当鼠标悬停在类 square 的元素上时，我必须调用函数 repositionner()（所以从 carre1 到 carre5）。在 repositionner() 中，我必须实现代码以将正方形的水平值与其垂直值切换。我不确定我的 init() 代码是否有效，但我绝对无法弄清楚 repositionner()。这两个函数从一开始都是空的。感谢您的回复，这是我的代码：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Reposition the squares</title>
<style>
#bac {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
}
.square {
width: 50px;
height: 50px;
}
#carre1 {
position: absolute;
left: 300px;
top: 200px;
background-color: red;
}
#carre2 {
position: absolute;
left: 120px;
top: 75px;
background-color: blue;
}
#carre3 {
position: absolute;
left: 50px;
top: 240px;
background-color: orange;
}
#carre4 {
position: absolute;
left: 350px;
top: 0px;
background-color: black;
}
#carre5 {
position: absolute;
left: 50px;
top: 50px;
background-color: pink;
}
</style>
<script>
function init() { <!-- code here -->
for(let i = 0 ; i < document.getElementsByClassName("square").length; i++){
document.getElementsByClassName("square")[i].addEventListener("mouseover",reposition);
}
}
function reposition() { <!-- code here -->
document.getElementById("carre1").style.top = "300px";
document.getElementById("carre1").style.left = "200px";
document.getElementById("carre2").style.top="120px";
document.getElementById("carre2").style.left="75px";
document.getElementById("carre3").style.top="50px";
document.getElementById("carre3").style.left="240px";
document.getElementById("carre4").style.top="350px";
document.getElementById("carre4").style.left="0px";
document.getElementById("carre5").style.top="50px";
document.getElementById("carre5").style.left="50px";
}
</script>
</head>
<body onload="init()">
<h1>Reposition the squares</h1>
<div id="bac">
<div id="carre1" class="square"></div>
<div id="carre2" class="square"></div>
<div id="carre3" class="square"></div>
<div id="carre4" class="square"></div>
<div id="carre5" class="square"></div>
</div>
</body>
</html>
解决方案
希望这对您来说是一个足够的解决方案。您的问题function init()是document.getElementsByClassName('.square')返回一个 html 集合，因此您需要遍历正方形以添加addEventListener. 我在这里做了一个forEach循环。脚本标签的放置也存在问题，我将它们移到页面底部，因为我遇到了关于在页面上定位元素的错误。
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Reposition the squares</title>
<style>
#bac {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
}
.square {
width: 50px;
height: 50px;
}
#carre1 {
position: absolute;
left: 300px;
top: 200px;
background-color: red;
}
#carre2 {
position: absolute;
left: 120px;
top: 75px;
background-color: blue;
}
#carre3 {
position: absolute;
left: 50px;
top: 240px;
background-color: orange;
}
#carre4 {
position: absolute;
left: 350px;
top: 0px;
background-color: black;
}
#carre5 {
position: absolute;
left: 50px;
top: 50px;
background-color: pink;
}
</style>
</head>
<body>
<h1>Reposition the squares</h1>
<div id="bac">
<div id="carre1" class="square"></div>
<div id="carre2" class="square"></div>
<div id="carre3" class="square"></div>
<div id="carre4" class="square"></div>
<div id="carre5" class="square"></div>
</div>
<script>
document.querySelectorAll('.square').forEach(square => square.addEventListener('mouseover', reposition));
function reposition() { <!-- code here -->
document.getElementById("carre1").style.top = "300px";
document.getElementById("carre1").style.left = "200px";
document.getElementById("carre2").style.top="120px";
document.getElementById("carre2").style.left="75px";
document.getElementById("carre3").style.top="50px";
document.getElementById("carre3").style.left="240px";
document.getElementById("carre4").style.top="350px";
document.getElementById("carre4").style.left="0px";
document.getElementById("carre5").style.top="50px";
document.getElementById("carre5").style.left="50px";
}
</script>
</body>
</html>
Expand snip