"document.getElementById 不能选择多个元素"

Question

我正在加载。 我有 div #loading<\/code>这是可见的。 还有更多隐藏的 div #message<\/code> 。 我有js功能。

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

Answer 1

您需要为 DOM 元素使用唯一 ID。 尝试像这样修改你的代码：

<script type="text/javascript">
function loading() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    var el = document.getElementsByClassName('message');
    console.log(el);
    $.each(el, function(i, item){
    item.style.display = 'block';
    });
  }, 500, "fadeOut");
}
loading();
</script>
<style>
#loading {
  display: block;
}
.message{
  display: none;
}
</style>

<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 class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

Answer 2

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

另一个问题是您似乎试图使用 jQuery 来淡出元素，但您没有将 jQuery 用于其他任何事情。 我将建议您使用 CSS 转换。 它们易于使用，您无需加载庞大的库。 在这里，我添加了新类fadein和fadeout ，它们（根据您的代码）在三秒内将指定元素的不透明度增加/减少为零。

 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>

Answer 3

ID属性必须是唯一的。 您不能在页面上多次使用相同的 ID。 如果您喜欢使用相同的键，则将其用作可以相同或不同的class或data-id 。

Answer 4

您不能在一个文档中两次使用相同的 id，以便选择多个元素，将它们按相同的类而不是按 id 分组，然后使用以下内容将它们全部选中。

document.querySelectorAll(".ClassName")

或者

document.getElementsByClassName(".ClassName");

请注意，这两种方法都返回文档中具有指定类名的所有元素的集合，作为 NodeList 对象。

Answer 5

 function loading() { setTimeout(function() { document.getElementById("loading").style.display = "none"; document.getElementById("message").style.display = "block"; }, 500, "fadeOut"); } loading();<\/code><\/pre>
 #loading { display: block; } #message { display: none; }<\/code><\/pre>
 <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 id="message"> QWERTY

<div id="message"> 123456 <\/code><\/pre>

"