Javascript Show/Hide 某些元素通过单击按钮

Question

我的屏幕上有 12 个图块（100 像素 x 100 像素方块）。

每个图块默认设置为 display:block 并具有白色背景 background: rgb(255,255,255);

如果单击图块，背景将变为橙色 rgb(255,161,53)。使用以下函数：

function changeColour(id){
{
    var current_bg = document.getElementById(id).style.backgroundColor;

    if(current_bg != "rgb(255, 161, 53)"){
        document.getElementById(id).style.backgroundColor = "rgb(255,161,53)";
    } else if(current_bg == "rgb(255, 161, 53)"){
        document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
    }
}

在页面底部我有一个名为 "showHide" 的按钮，按下后我只想显示橙色背景的图块。再次按下后，我希望所有图块都出现。

Answer 1

元数据是什么意思

一个细分：

第一个块遍历每个图块并设置一个 onclick 处理程序
当您单击一个块时，它会将 orange 设置为 class 列表或使用切换将其删除。实际的橙色着色来自样式表。 class 名称中没有 orange 的图块 :not() 获得白色背景。
当您单击显示隐藏按钮时，您会看到同样的技巧。每个 class 不包含 orange 的列表都会被切换的 hide class 名称隐藏。

我在这里使用了不同的方法，使用 class 名称作为选择器并使用它们来获得所需的结果。

function changeColour() {
  this.classList.toggle("orange");

  //if hiding is on we need to also hide that block
  if (this.parentElement.querySelectorAll("div.tiles.hide").length > 0)
  {
    this.classList.add("hide");
  }
}

var divs = document.querySelectorAll("div.tiles");

//use Array.prototype.forEach to iterate over nodelist
Array.prototype.forEach.call(divs, function(element){
  element.addEventListener("click", changeColour);
});

document.querySelector("button.hide").addEventListener("click", showHide);

function showHide(){
  
  Array.prototype.forEach.call(divs, function(element){
    
    if (!element.classList.contains("orange"))
    {
      element.classList.toggle("hide");
    }
  });  
}

div.tiles {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid grey;
}

div.tiles:not(.orange) {
  background-color: #ffffff;
}

div.tiles.orange {
  background-color: rgb(255,161,53);
}

div.tiles.hide {
  display: none;
}

<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>

<button class="hide">show/hide white tiles</button>

Javascript Show/Hide 某些元素通过单击按钮

Javascript Show/Hide certain elements by clicking a button

html

javascript

dom

show-hide