javascript - 找到最接近的#loading 并显示它？

Question

我有另一个问题的一些代码，显示使用以下内容加载几秒钟:

  const Loading = () => {
    let tOut = null;
    const el = document.querySelector(".loading");
    const show = () => {
      el.classList.add('show');
      tOut = setTimeout(hide, 5000);
    };  
    const hide = () => {
      el.classList.remove('show');
      clearTimeout(tOut);
    };
    return {
      show,
      hide
    };
  };


  const loadingDots = Loading();
  const loadBtns = document.querySelectorAll('.item');

  [...loadBtns].forEach(el => el.addEventListener('click', loadingDots.show));

唯一的问题是，当我打开 3 个单独的模态框时，我需要它显示，但只有最靠近页面顶部的模态框显示加载屏幕，我有一种感觉，因为它没有显示最接近的#loading 屏幕并显示它找到的第一个屏幕，#loading 的 html 是:

 <div id="loading"><i></i><i></i><i></i></div> 

它是使用 php 注入(inject)到页面中的，因此相同的代码出现在 3 个位置(不确定这是否与它有关)。

HTML 是:

<div class="services_bg_images">
  <div class="services_container" ID='services-target'>
    <div class="services_title_main">
      <h6 data-aos="fade-down">Our Capabilities</h6>
    </div>
    <div data-aos="fade-down" class="underline4"></div>
    <div class="services_text">
      <p data-aos="fade-down" class="p3">Click modules to book & view prices where available.</p>
    </div>
    <div class="services_wrap">

      <div class="items">
        <div class="item" id="capa_1" data-modal="#modalFive">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="400" class="p4">

              </p>
          </div>
        </div>

        <div id="modalFive" class="modal_briefs">
          <div class="inline-wrap"><span class="closex_brief"></span>

            <div class="brief_container_modal">
             <div class="loading"><i></i><i></i><i></i></div>
              <div class="capabilities_title_main">
                <h6 data-aos="fade-down">Get a Quote</h6>
              </div>
              <div data-aos="fade-down" class="underline4"></div>
              <div class="capabilities_text">
                <p data-aos="fade-down" class="p3">Fill in the brief below to get a quote.</p>
              </div>
              <div class="brief_wrap_modal">
                <iframe id="brief_1" data-src="/wordpress/gfembed/?f=5" height="100%" width="100%" frameBorder="0" scolling="no" class="gfiframe"></iframe>
              </div>
            </div>
          </div>
        </div>


        <div class="item" id="capa_2" onclick="location.href='pricing';">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="800" class="p4">

              </p>
          </div>
        </div>

        <div class="item" id="capa_3" data-modal="#modalSeven">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="1200" class="p4">

             </p>
          </div>
        </div>

        <div id="modalSeven" class="modal_briefs">
          <div class="inline-wrap"><span class="closex_brief"></span>

            <div class="brief_container_modal">
             <div class="loading"><i></i><i></i><i></i></div>
              <div class="capabilities_title_main">
                <h6 data-aos="fade-down">Get a Quote</h6>
              </div>
              <div data-aos="fade-down" class="underline4"></div>
              <div class="capabilities_text">
                <p data-aos="fade-down" class="p3">Fill in the brief below to get a quote.</p>
              </div>
              <div class="brief_wrap_modal">
                <iframe id="brief_3" data-src="/wordpress/gfembed/?f=3" height="100%" width="100%" frameBorder="0" scolling="no" class="gfiframe"></iframe>
              </div>
            </div>
          </div>
        </div>


        <div class="item" id="capa_4" data-modal="#modalEight">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="1600" class="p4">

              </p>
          </div>
        </div>

        <div id="modalEight" class="modal_briefs">
          <div class="inline-wrap"><span class="closex_brief"></span>
            <div class="brief_container_modal">
             <div class="loading"><i></i><i></i><i></i></div>
              <div class="capabilities_title_main">
                <h6 data-aos="fade-down">Get a Quote</h6>
              </div>
              <div data-aos="fade-down" class="underline4"></div>
              <div class="capabilities_text">
                <p data-aos="fade-down" class="p3">Fill in the brief below to get a quote.</p>
              </div>
              <div class="brief_wrap_modal">
                <iframe id="brief_4" data-src="/wordpress/gfembed/?f=4" height="100%" width="100%" frameBorder="0" scolling="no" class="gfiframe"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.loading {
  position: fixed;
  z-index: 1000;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  display:flex;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 3em;
  align-items: center;
  justify-content:center;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}
.loading.show {
  opacity: 1;
  visibility: visible;
}
@keyframes blink {
  50% {opacity: 1;}
}
.loading i:after {content: "\25cf";}
.loading i { opacity: 0; animation: blink 1.2s infinite; }
.loading i:nth-child(2) { animation-delay: .2s; }
.loading i:nth-child(3) { animation-delay: .4s; }

.brief_container_modal {
    position: absolute;
}
.brief_container,.brief_container_modal{
    z-index:99;
    top:150px;
    width:1200px;
    max-width:90%;
    margin-bottom:50px;
    left:0;
}
.brief_container,.brief_container_modal,
.brief_wrap_modal,.closex_brief {
    margin-right:auto;
    margin-left:auto;
    right:0
}
.brief_container_modal{
    background:linear-gradient(to bottom right,#f5f5f5 50%,#fff 50%);
    border:3px solid #ec321f;
    border-radius:10px;
}
.closex_brief{
    position:absolute;
    background:url(IMAGES/close_icon.png);
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:block;
    left:0;
    top:125px;
    z-index:1000
}
.brief_wrap_modal {
    position: relative;
    width: 1150px;
    max-width: 95%;
    height: inherit;
}

如果有人可以提供帮助，我们将不胜感激!

Answer 1

ID 应该是唯一的。因此，document.querySelectorAll('#capa_1') 仅选择具有该 ID 的第一个模态框。使用一个类来匹配所有模态 DIV。

事实上，您只有一个 id="capa_1" 的 DIV。所有模态都有 class="item"，因此您应该使用它来获取所有模态。

JS 应该是:

const loadBtns = document.querySelectorAll('.item');