我正在嘗試制作一些簡單的按鈕來隱藏組中的某些元素，然后制作一些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"})};
}
EXAMPLE: When the button "View A" is clicked, it scrolls to "Element 3A", but I want it to scroll to "Element 1A"... When the button "Hide 1" is clicked first, and then "View A" is clicked, then it scrolls to "Element 3A" again, but I want it to scroll to "Element 2A" this time, since Element 1A is hidden now.
uj5u.com熱心網友回復：
當您觸發（例如）該viewa函式時，您將遍歷所有具有“a”類的元素。然后scrollIntoView在這些元素上觸發函式。所以你基本上做的是scrollIntoView在很短的時間內觸發3 次，每次都用下一個呼叫來否決上一個呼叫。這解釋了為什么它總是關注元素 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" })};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/349543.html