Question

我有这个添加/删除功能只处理“sineDelay”id的第一个实例，但不能让它在“sineDelay”id的每个实例上运行。我想点击按钮将其添加到该ID的每个实例中。请帮助，谢谢：）

function $delSinSlowTight() {
  var element = document.getElementById("sineDelay");
  element.classList.remove("delSinMedTight");
  element.classList.add("delSinSlowTight");
}

function $delSinMedTight() {
  var element = document.getElementById("sineDelay");
  element.classList.remove("delSinSlowTight");
  element.classList.add("delSinMedTight");
}

.circleDelayFunction {
  height: 48px;
  width: 48px;
  margin: 5px 5px 5px 5px;
  display: inline-block;
  border-radius: 16px;
  background: linear-gradient(90deg, #3878fe, #a173fe);
}

.delSinSlowTight{
  animation: oscillate 2s ease-in-out infinite;
  animation-play-state: running;


  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
     animation-delay: ( #{sin(.15) * ($i)}s );
    }
}}

.delSinMedTight{
  animation: oscillate 1s ease-in-out infinite;
  animation-play-state: running;


  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
     animation-delay: ( #{sin(.25) * ($i)}s );
    }
}}

<div class="demo">
  <div id="sineDelay" class="circleDelayFunction delSinSlowTight"></div>
  <div id="sineDelay" class="circleDelayFunction delSinSlowTight"></div>
  <div id="sineDelay" class="circleDelayFunction delSinSlowTight"></div>
  <div id="sineDelay" class="circleDelayFunction delSinSlowTight"></div>
  <div id="sineDelay" class="circleDelayFunction delSinSlowTight"></div>
  <div id="sineDelay" class="circleDelayFunction delSinSlowTight"></div>
</div>

<li><button class="button--delay" onclick="$delSinSlowTight()">$delSinSlowTight</button></li>
<li><button class="button--delay" onclick="$delSinMedTight()">$delSinMedTight</button></li>

Answer 1

HTML ID被设计为单实例属性。尝试为要更新的所有元素分配一个类，然后使用document.getElementsByClassName("circleDelayFunction")获取所有元素的数组。然后，您可以遍历数组来操作元素。

Answer 2

使用document.getElementById是不可能的，因为它只返回与给定id匹配的第一个元素，如果没有这样的元素则返回null。如果您想要使用该ID定位所有div元素。使用类似的东西：

function $delSinSlowTight() {
    var elements = document.getElementsByClassName("demo")[0].childNodes;
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove("delSinMedTight");
        elements[i].classList.add("delSinSlowTight");
    }

}

其他功能也是如此。此外，id应该是唯一的，这意味着文档中不应该有两个或多个共享相同id的元素。从技术上讲，可能有多个共享相同ID的元素，但它总是被认为是一种不好的做法。

将类添加/删除到具有相同ID的多个实例

2 个答案: