Question

我的屏幕上有12个图块（100px×100px正方形）。

默认情况下，每个图块都设置为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设置为班级列表，或使用切换将其删除。实际的橙色着色来自样式表。在其班级名称orange中没有:not()的磁贴获得白色背景。
当您点击“显示隐藏”按钮时，您会看到相同的技巧。每个不包含orange的班级列表都会被切换的hide班级名称隐藏。

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

＆＃13;

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");
    }
  });  
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Javascript通过单击按钮显示/隐藏某些元素

1 个答案: