如何解决在javascript中,我如何在具有相同类的多个div上运行一个函数以获得不同的结果
我正在尝试在具有相同类的不同 div 上运行相同的函数。问题是我需要函数来使用每个容器的 offsetTop 并且每个 div 都有不同的值。 div 具有相同的类,因为我不知道网站的每个页面上将出现多少个 div。
<!DOCTYPE html>
<html>
<body>
<div class="container-div">
<div class="element">distance to top is </div>
</div>
<p>
.<br>.<br>.<br>.<br>
</p>
<div class="container-div">
<div class="element">distance to top is </div>
</div>
<p>
.<br>.<br>.<br>.<br>
</p>
<div class="container-div">
<div class="element">distance to top is </div>
</div>
<button onclick="myFunction()">Get distance</button>
<script>
function myFunction() {
var container = document.getElementsByClassName("container-div");
container[0].innerHTML = "distance to top for this Div is" container.offsetTop;
container[1].innerHTML = "distance to top for this Div is" container.offsetTop;
container[2].innerHTML = "distance to top for this Div is" container.offsetTop;
}
</script>
</body>
</html>
解决方法
据我所知,这就是您所需要的,forEach 循环遍历所有带有 class 元素的 div。您可以使用 document.querySelectorAll('.yourclass')
按类获取所有 div<!DOCTYPE html>
<html>
<body>
<div class="container-div">
<div class="element">Distance to top is </div>
</div>
<p>
.<br>.<br>.<br>.<br>
</p>
<div class="container-div">
<div class="element">Distance to top is </div>
</div>
<p>
.<br>.<br>.<br>.<br>
</p>
<div class="container-div">
<div class="element">Distance to top is </div>
</div>
<button onclick="myFunction()">Get distance</button>
<script>
function myFunction() {
// Get all divs
const divElements = document.querySelectorAll('.element')
// Loop trough all elements you selected
divElements.forEach(element => {
let distance = element.offsetTop;
element.innerHTML = 'Distance to top is: ' + distance;
});
}
</script>
</body>
</html>
document.getElementsByClassName("container-div")
将返回具有 container-div 类的元素集合,您
可以像这样循环遍历它们:
<!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">
<title>Document</title>
</head>
<body>
<div class="container-div">
<div class="element">Distance to top is </div>
</div>
<p>
.<br>.<br>.<br>.<br>
</p>
<div class="container-div">
<div class="element">Distance to top is </div>
</div>
<p>
.<br>.<br>.<br>.<br>
</p>
<div class="container-div">
<div class="element">Distance to top is </div>
</div>
<button onclick="myFunction()">Get distance</button>
<script>
function myFunction() {
var container = document.getElementsByClassName("container-div");
for(let i = 0; i<container.length;i++){
container[i].innerHTML = "Distance to top is " + container[i].offsetTop;
}
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。