如何使用 javascript 使 onclick 动作（向下滚动 150 像素）到没有 id 的特定 class 元素？
[英]How to make onclick action(scroll down 150px) to specific class element that has no id using javascript?
问题描述
I have a tab table with id of "eael-advance-tabs-d1be836" and it has smaller elements with no id in them but they have "class" assigned to them.
我有一个 ID 为“eael-advance-tabs-d1be836”的选项卡表，它有较小的元素，其中没有 ID，但它们分配了“类”。 I tried to change the code i once used with getElementById to getElementByClassName and it doesn't work, the goal is to make a action when specific element with specific class is clicked in page and scroll down 150 pixels lower code sample below Inspect element view The sample below works perfectly with using id by the elements in tab table have no id but only "class".我尝试将我曾经与 getElementById 一起使用的代码更改为 getElementByClassName 并且它不起作用，目标是在页面中单击具有特定 class 的特定元素并向下滚动 150 像素下方代码示例下方检查元素视图时执行操作下面的示例与使用 id 的选项卡表中的元素完美配合，没有 id 而只有“类”。 Is it possible to edit this code so that it would work with 'getElementsByClassName'?是否可以编辑此代码以使其与“getElementsByClassName”一起使用？
Thank you!谢谢！
<html> <body> <form> <input class="cat" type="checkbox" id="myCheck" > </form> <p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p> <script> var scrollAmount = 150; var element = document.getElementById("myCheck"); element.addEventListener("click", scrollPage); function scrollPage() { var currentPositionOfPage = window.scrollY; window.scrollTo(0, currentPositionOfPage + scrollAmount); } </script> </body> </html>
4 个解决方案
解决方案1
0 2020-08-17 16:49:44
Just use document.getElementsByClassName("myScrollClass")[0] to get the first element with the desired class.只需使用document.getElementsByClassName("myScrollClass")[0]来获取具有所需 class 的第一个元素。 If you have more than one element with this class iterate over it and set on every of them the eventlistner.如果您有多个元素与此 class 迭代并在每个元素上设置 eventlistner。
var scrollAmount = 150; var element = document.getElementById("myCheck"); var element2 = document.getElementsByClassName("myScrollClass")[0]; element.addEventListener("click", scrollPage); element2.addEventListener("click", scrollPage); function scrollPage() { var currentPositionOfPage = window.scrollY; window.scrollTo(0, currentPositionOfPage + scrollAmount); }
<form> <input class="cat" type="checkbox" id="myCheck" >With id <br> <input class="myScrollClass" type="checkbox" id="myCheck" >With class </form> <p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p>
解决方案2
0 2020-08-17 16:51:27
You can use document.querySelector() like this您可以像这样使用document.querySelector()
<html> <body> <form> <input class="cat" type="checkbox" id="myCheck" > </form> <p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p> <script> var scrollAmount = 150; var element = document.querySelector(".scroll-class"); element.addEventListener("click", scrollPage); function scrollPage() { var currentPositionOfPage = window.scrollY; window.scrollTo(0, currentPositionOfPage + scrollAmount); } </script> </body> </html>
解决方案3
0 2020-08-17 16:51:51
If it's just one element, use document.getElementsByClassName('CLASS')[0].addEventListener(...) .如果它只是一个元素，请使用document.getElementsByClassName('CLASS')[0].addEventListener(...) 。
If you want to add an event listener to all the class elements, use如果要向所有 class 元素添加事件侦听器，请使用
document.getElementsByClassName('CLASS').forEach(element => {
element.addEventListener('click', scrollPage)
})
解决方案4
0 2020-08-17 16:53:27
document.body.addEventListener("click", function(e) {
if(e.srcElement.classList.contains("myClass")) {
scrollPage();
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.