时间戳

首页 > 解决方案 > 删除元素后更新数组长度

javascript - 删除元素后更新数组长度

问题描述

免责声明：我是一个完全的菜鸟。请多多包涵 ;）

我正在做一个使用 CSS 动画并用 JS 操作 DOM 的小项目。通过单击动画元素，它们将从 DOM 中删除。删除所有项目后，将添加一个视频元素。

后者是我苦苦挣扎的地方。元素已从 DOM 中删除，但 cat 数组的长度不会更新，因此它永远不会达到 0（添加视频时）。这是我项目的摘录： https ://codepen.io/miliberlin/pen/BaawrKg

（PS：如果有人也能帮我弄清楚为什么 .cat:hover {transform: rotate(360deg);} 在我的 CSS 文件中不起作用，我将永远感激不尽）


for (i = 0; i < cat.length; i++) {
  cat[i].addEventListener('click', function() {
    this.parentNode.removeChild(this);
  });
}
if (cat.length === 0) {
  const iframe = document.createElement("iframe");
  iframe.src = "https://www.youtube.com/embed/SB-qEYVdvXA";
  iframe.width = "560";
  iframe.height = "315";
  document.getElementById("wrapper").appendChild(iframe);
}

标签： javascriptarrays

解决方案

在这种情况下，最好使用HTMLCollectionDOM 上的实时视图，而不是NodeList从querySeletorAll静态返回。

此外，javascript 不是反应式的，因此代码在为空if (cat.length === 0) {...}时不会神奇地运行。cat发生这种情况时，您必须自己调用它：

const cat = document.getElementsByClassName("cat");

for (let i = 0; i < cat.length; i++) {
  cat[i].addEventListener('click', function() {
    this.parentNode.removeChild(this);
    if (cat.length === 0) {
      whenCatEmpty()
    }
  });
}

function whenCatEmpty() {
  const iframe = document.createElement("iframe");
  iframe.src = "https://www.youtube.com/embed/SB-qEYVdvXA";
  iframe.width = "560";
  iframe.height = "315";
  document.getElementById("wrapper").appendChild(iframe);
}

如果有人也可以帮我弄清楚为什么 .cat:hover {transform: rotate(360deg);} 不起作用

您transform在动画和.cat:hover. CSS 声明相互覆盖。您可以使用属性在动画中移动猫top（性能不如transform: translate但我看不到任何其他方法可以使它与transform: rotate

@keyframes motion{
    to{ top: 1500px }
}

推荐阅读