如何通过Scrollingtoview()查看组的第一个元素

Question

我试图制作一些简单的按钮来隐藏组中的一些元素，然后制作一些scrollIntoView按钮来查看"第一个"；单击时这些元素的可见实例。隐藏函数可以正常工作，但查看函数总是转到同一类名的最后一个元素。如何让他们进入第一个？我对javascript没有经验，所以如果我的代码重复太多，我很抱歉。这是HTML部分：

<div class="element1 a">Element 1A</div>
<div class="element1 b">Element 1B</div>
<div class="element1 c">Element 1C</div>
<div class="element2 a">Element 2A</div>
<div class="element2 b">Element 2B</div>
<div class="element2 c">Element 2C</div>
<div class="element3 a">Element 3A</div>
<div class="element3 b">Element 3B</div>
<div class="element3 c">Element 3C</div>

<div class="hide" onclick="hide1()">Hide 1</div>
<div class="hide" onclick="hide2()">Hide 2</div>
<div class="hide" onclick="hide3()">Hide 3</div>
<div class="view" onclick="viewa()">View A</div>
<div class="view" onclick="viewb()">View B</div>
<div class="view" onclick="viewc()">View C</div>

以下函数可以很好地隐藏类1、2和3：

function hide1() {
var i; var div = document.getElementsByClassName("element1");
for (i=0; i<div.length; i++) {div[i].style.display = "none";}
}
function hide2() {
var i; var div = document.getElementsByClassName("element2");
for (i=0; i<div.length; i++) {div[i].style.display = "none";}
}
function hide3() {
var i; var div = document.getElementsByClassName("element3");
for (i=0; i<div.length; i++) {div[i].style.display = "none";}
}

这是我有问题的部分。当我使用上面的按钮隐藏一个类时，下面的函数总是查看"；最后一个"；a、b或c的可见实例；第一个"；而是可见的实例？

function viewa() {
var i; var div = document.getElementsByClassName("a");
for(i=0; i<div.length; i++){div[i].scrollIntoView({behavior: "smooth"})};
}
function viewb() {
var i; var div = document.getElementsByClassName("b");
for(i=0; i<div.length; i++){div[i].scrollIntoView({behavior: "smooth"})};
}
function viewc() {
var i; var div = document.getElementsByClassName("c");
for(i=0; i<div.length; i++){div[i].scrollIntoView({behavior: "smooth"})};
}

示例：当按钮"；视图A"；则滚动到"；元件3A"；，但我希望它滚动到"；元件1A〃；。。。当按钮"；隐藏1"；首先点击；视图A"；则滚动到"；元件3A"；但是我希望它滚动到"；元件2A"；这一次，因为元素1A现在被隐藏。

Answer 1

当您触发(例如(viewa函数时，您将循环使用类"a"的所有元素。然后在这些元素上触发scrollIntoView函数。因此，您基本上要做的是在很短的时间内触发scrollIntoView3次，每次都用下一次调用来推翻上一次调用。这解释了为什么它总是关注元素3A(因为它是for循环中的最后一个元素(。

你想做的不是在所有元素中循环，而是找到第一个可见元素：

document.querySelector('.a:not([style="display: none;"])')

这找到具有类"的第一个元素；a"；它不具有"display: none;"的样式属性(这是用于隐藏hide1函数中的元素的属性(。

所以要修复你的代码：

function viewa() {
let el = document.querySelector('.a:not([style="display: none;"])')
el.scrollIntoView({ behavior: "smooth" })};
}