如何通过JS方法.hide隐藏btn上的随机div

如何解决如何通过JS方法.hide隐藏btn上的随机div

问题来了：

通过方法 .style.visibility = 'hidden' 在 btn 点击时有多个可以隐藏的 div（随机 90 个项目被隐藏，总共 100 个项目被隐藏）
然而，这意味着所有隐藏的 div 都会在其余可见的 div 之间留下空白
需要通过将 .hide 方法而不是 .style.visibility 应用于代码来解决此问题
太糟糕了，我不知道如何让 .hide 正常工作

这是我得到的：

HTML

<html>
<body>

<button id="hide-containers" onclick="hide()">Hide random containers</button>

<div class="container">Item 1</div>
<div class="container">Item 2</div>
...
<div class="container">Item 99</div>
<div class="container">Item 100</div>
</body>
</html>

JS .style.visibility 方法 /// 工作正常，但在 div 之间留有空格

    function hide() {
    var cubes = document.getElementsByClassName('container');
    for (var i = 0; i < cubes.length; i++) {
        cubes[i].style.visibility = '';
    }
    for (var i = 0; i < 90;) {
        var y = Math.floor(Math.random() * 100);
        if (cubes[y].style.visibility == '') {
            cubes[y].style.visibility = 'hidden';
            i++;
        }
    }
}

JS .hide 方法 // 不工作

    function hide() {
    var cubes = document.getElementsByClassName('container');
    for (var i = 0; i < cubes.length; i++) {
        cubes[i].style.visibility = '';
    }
    for (var i = 0; i < 90;) {
        var y = Math.floor(Math.random() * 100);
        for (var cubes){.hide(this);
        }
    }
}

问题：如何重新编写 JS 代码以通过 .hide 方法成功运行它，从而防止隐藏的 div 在剩余的可见 div 之间留下空白？

谢谢你们帮我解决这个问题。

解决方法

所以，多亏了 .style.display = 'none' 和 style.display = 'block' 的提示，我找到了正确的代码组合。发布结果，这是我的问题的有效解决方案：

function hide() {
    var cubes = document.getElementsByClassName('container');
    for (var i = 0; i < cubes.length; i++) {
        cubes[i].style.display = '';
    }
    for (var i = 0; i < 90;) {
        var y = Math.floor(Math.random() * 100);
        if (cubes[y].style.display == '') {
            cubes[y].style.display = 'none';
            i++;
        }
    }
}

再次感谢！

使用 css display 解决间距问题，或者使用 css 类将元素移出页面。以下代码段执行后者。它使用 event Delegation 而没有 jQuery。此外，如果您想隐藏 90 个容器（因此要保留 10 个容器），您将需要唯一随机数。因此，该代码段包含一个工厂方法。该代码段首先隐藏所有容器，然后随机显示 10 个。

document.addEventListener("click",hide);

for (let i = 0; i < 100; i += 1) {
  document.body.insertAdjacentHTML("beforeEnd",`<div class="container">Item ${i+1}</div>`);
}

function uniqueRandomFactory(max) {
  let randomCache = [];

  const uniqueRandom = () => {
    const r = Math.floor(Math.random() * max);
    if (!randomCache.find(el => el === r)) {
      randomCache.push(r);
      return r;
    }
    return uniqueRandom();
  };

  return uniqueRandom;
}

function hide(evt) {
  if (evt.target.id === "hide-containers") {
    const containers = document.querySelectorAll(".container");
    document.querySelectorAll('.container').forEach(container =>
      container.classList.add('hidden'));
    let uRandom = uniqueRandomFactory(100);
    for (let i = 0; i < 10; i += 1) {
      containers[uRandom()].classList.remove('hidden');
    }
    return;
  }
  if (evt.target.id === "show-all") {
    document.querySelectorAll('.hidden').forEach(container =>
      container.classList.remove('hidden'));
  }
}

.hidden {
  position: fixed;
  top: -5000px;
}

<button id="hide-containers">Hide random containers</button>
<button id="show-all">Show all containers</button>

如何通过JS方法.hide隐藏btn上的随机div

如何解决如何通过JS方法.hide隐藏btn上的随机div

解决方法

相关推荐