Javascript 选择当前可见并存储在变量中的DIV ID

如何选择当前可见的父ID的第一个子项并将其存储到变量中

我在下面列出了示例代码。这是一系列内容，当有人单击或按enter键时，这些内容会淡入淡出。我在侧边栏中添加了一个按钮，以防有人不想完成所有步骤（实际代码中有140多个switch case语句），而想直接转到联系人表单。我一直在思考如何选择当前可见的ID，以便在联系人表单淡入时淡出它

仅包含直接子div的示例HTML

    <div id="page_container">
        <div id="page1"></div>
        <div id="page2"></div>
        <div id="page3"></div>
        <div id="submitPage"></div>
    </div>
    <div id="side_bar">
        <button id="submit_button">Click Here</button>
    </div>

---

我终于想出了一个解决办法。也许不是最好的。但是，在我学会如何使用更先进、更少胡言乱语的技术之前，它暂时还可以

我为所有内容添加了一个新的divid包装器。在该内容之外创建了一个提交表单包装器，然后添加了一个新的case开关，以便在有人单击按钮时淡出主ID包装器，淡入次ID包装器

HTML

<div id="page_container">
    <div id="page1" style="visibility: hidden">
        <div id="inner_page1">
            <div id="inner_page1_content">
                Page 1 Content goes here.
            </div>
            <button id="button_1">Click Here</button>
            <div id="click_1">press Enter</div>
        </div>
    <div>
    <div id="page2" style="visibility: hidden">
        <div id="inner_page2">
            <div id="inner_page2_content">
                Page 2 Content goes here.
            </div>
            <button id="button_2">Click Here</button>
            <div id="click_2">press Enter</div>
        </div>
    <div>
    <div id="page3" style="visibility: hidden">
        <div id="inner_page3">
            <div id="inner_page3_content">
                Page 3 Content goes here.
            </div>
            <button id="button_3">Click Here</button>
            <div id="click_3">press Enter</div>
        </div>
    <div>
    <div id="submitPage" style="visibility: hidden">
        <div id="inner_submitPage">
            <div id="inner_submitPage_content">
                Submit page Info Goes here.
            </div>
            <button id="button_4">Click Here</button>
            <div id="click_4">press Enter</div>
        </div>
    <div>
</div>
<div id="side_bar">
    <button id="submit_button">Click Here</button>
</div>

  <div id="left_sidebar"></div>
  <div id="main_wrapper">
      <div id="content-1"></div>
      <div id="content-2"></div> + 100 More. 
  </div>
  <div id="contact_wrapper">
      <div id="contact_form2">
  </div>
  <div id="right_sidebar">
      <button id="button1">Click Here</div>
  </div>

如何选择当前可见的父ID的第一个子项并将其存储到变量中？

您可以使用条件检查第一个子项的计算和/或内联样式

divEl.children[0]

，是否设置为

display:none

或

可见性：hidden

。如果没有，则运行代码在变量中定义id

const parent=document.getElementById（'parent'））
const children=document.queryselectoral（“.child”）
设id=''；
children.forEach（child=>{
addEventListener（'click'，e=>{
//注释掉下面的行，以查看console中ID分配的不同结果
e、 target.children[0].classList.toggle（'hide'）（也许你可以添加一个非常基本的代码来复制你的问题，你也可以考虑添加一个工作代码的片段，这将有助于你更快地得到一个满意的答案。请看看什么是戴尔- IKIK——如果你看JSoDeld中的代码，它仍然不包含所有的内容。在这种情况下很难帮助。考虑一下MO。违反所有“规则”对于像JSON这样的数据结构，而不是在Switk/case语句中拥有所有这些信息。有很多重复代码——使用一个函数代替。考虑使用类名而不是直接在元素上设置属性。那么也许您可以使用CSS选择器来选择需要的元素。这不适用于键盘。d事件。我想我只需要对这样的代码进行一些调整就可以了？谢谢你的全面回答。当我再次修改代码时，我会实施这个策略。我刚刚终于在现有结构中实现了它，没有任何错误示例，最后两行处理按键和单击的代码阻止了所有键盘按键（无法填写表单）和所有未分配的按钮和锚..但昨天设法解决了这个问题。
  <div id="left_sidebar"></div>
  <div id="main_wrapper">
      <div id="content-1"></div>
      <div id="content-2"></div> + 100 More. 
  </div>
  <div id="contact_wrapper">
      <div id="contact_form2">
  </div>
  <div id="right_sidebar">
      <button id="button1">Click Here</div>
  </div>

case: button1:
fade_out = '#main_wrapper';
fade_in = '#contact_wrapper';
break;