document.getElementById 不能选择多个元素

Question

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

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。

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>

Answer 1

正如其他人所提到的，ids 是独一无二的，并且只能在页面上使用一次，因此请改用类。在这里，我使用了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 2

您需要为 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 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();

#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>