javascript - Hiding a div automatically when other related divs are also hidden
问题描述
My page consists of several elements, buttons and scrollers. Each button is to hide/unhide a group of elements, and each scroller is to scroll to the first element of the group. I use onclick
events to hide, unhide and scroll, and they all work fine. What I'm trying and failing to do is hiding the scroller automatically when all related elements are hidden.
EXAMPLE: When I click scroller
, page goes to Element 1a
. When I click 1st button
it hides/unhides Element 1a, 1b and 1c, and click 2nd button
it does the same for Element 1d, 1e, 1f. I need my scroller
to be hidden automatically when there's no visible element
left in the page which are connected with this scroller. How can I fix my js code to achieve this?
HTML:
<div class="element">Element 1a</div>
<div class="element">Element 1b</div>
<div class="element">Element 1c</div>
<div class="element">Element 1d</div>
<div class="element">Element 1e</div>
<div class="element">Element 1f</div>
...
<div class="button" onclick="hide1()">Hide/Unhide 1a,1b,1c</div>
<div class="button" onclick="hide2()">Hide/Unhide 1d,1e,1f</div>
<div class="scroller" onclick="scroll1()">Scroll to Element 1</div>
<script>window.onload = hidescroller()</script>
JS:
function hidescroller() {
var scroller = document.getElementsByClassName("scroller")[0];
var element = document.getElementsByClassName("element");
var i;
for (i=0; i<element.length; i++) {
if (element[i].style.display = "none") {
scroller.style.display = "none";
}
else {
scroller.style.display = "block";
}
}
}
I'm happy with my hide1()
, hide2()
and scroll1()
functions, so in order to avoid confusion I didn't write them. If you need to see them too, just let me know.
解决方案
推荐阅读
- python - 在 python 中绘制两个数组,其中一个填充随机数
- python - 在 GCP 上的哪里存储我的自定义 Python 模块,以便不同的 GCP 服务可以访问它们?
- python - 错误 SSL | Python 3.8 请帮帮我谢谢
- node.js - 从我的 reactjs 应用程序向我的 express 服务器发送请求时出现 CORS 错误,该服务器重定向到 Spotify 的 API
- r - 为什么人们会在 apARCH、gjrGARCH 和 E-GARCH 之间进行选择,是否有任何关键原因?
- angular - 如何在 Angular component.ts 中的函数之外声明 HTMLElement 变量?
- mongodb - 与 go-driver 相比,mongodb-rust-driver 在查找和获取大量数据时表现不佳
- c# - 如何以编程方式访问 AWS 开发工具包使用的 AWS 凭证?
- python - 不能使 folder_path = filedialog.askdirectory() 全局
- python - 如何将列表写入文件?