document.getElementById不能选择多个元素 [英] document.getElementById can't select more than one element

问题描述

我正在加载.我有可见的div #loading .还有更多隐藏的div #message .我有js函数.

I'm working on loading. I have div #loading which is visible. And more divs #message which are hidden. I have js function.

function loading() {
     setTimeout(function() {
         document.getElementById("loading").style.display = "none";
         document.getElementById("message").style.display = "block";
     }, 500, "fadeOut");
 }

但是该行 document.getElementById("message").style.display ="block"; 仅选择第一个div #message .

But that row document.getElementById("message").style.display = "block"; selects only first div #message.

function loading() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    document.getElementById("message").style.display = "block";
  }, 500, "fadeOut");
}
loading();

#loading {
  display: block;
}
#message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="loading();">
  <div id="loading">
    ...
  </div>
  <div id="message">
    QWERTY
  </div>
  <div id="message">
    123456
  </div>
</div>

推荐答案

正如其他人所提到的， id 是唯一的，只能在页面上使用一次，因此请使用类.在这里，我使用了 querySelectorAll 获取静态的类列表.

As the others have mentioned ids are unique and can only be used once on a page, so use a class instead. Here I've used querySelectorAll to grab a static list of classes.

另一个问题是，您似乎正在尝试使用jQuery淡出元素，但您没有将jQuery用于其他任何事情.我将建议您使用CSS过渡.它们易于使用，并且您无需加载庞大的库.在这里，我添加了新类 fadein 和 fadeout (它们根据您的代码)，将指定元素的不透明度在三秒钟内提高/降低为零.

The other issue is that you seem to be trying to use jQuery to fade the elements out, but you're not using jQuery for anything else. I'm going to suggest you CSS transitions. They're easy to use, and you don't have the need of loading a huge library. Here I add new classes fadein and fadeout which (based on your code) increases/reduces the opacity of the specified elements to zero over three seconds.

function loading() {
  setTimeout(function() {

    // use a class for the loader too otherwise the transition
    // won't work properly
    const loader = document.querySelector('.loading');
    loader.classList.add('fadeout');

    // grab the elements with the message class
    const messages = document.querySelectorAll('.message');

    // loop over them and add a fadeout class to each
    [...messages].forEach(message => message.classList.add('fadein'));
  }, 500);
}

loading();

.loading {
  opacity: 1;
}

.message {
  opacity: 0;
}

.fadein {
  transition: opacity 3s ease-in-out;
  opacity: 1;
}

.fadeout {
  transition: opacity 3s ease-in-out;
  opacity: 0;
}

<div class="messages">
  <div class="loading">
    Loading
  </div>
  <div class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

这篇关于document.getElementById不能选择多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！