时间戳

首页 > 解决方案 > 切换网格显示（我错过了什么？）

javascript - 切换网格显示（我错过了什么？）

问题描述

编写了一些代码来切换是否显示图像网格。它是一个 6x8 网格，所以我没有在这里包含 72 个 div 元素。当图像网格未显示时，文本列表可见。因此按钮文本发生了变化。无法找到任何错误。 

<!DOCTYPE html>
<html>
<head>
<style>
#photo-index {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 0px;
  background-color: #4f6b6f;
}
#toggle-button {
    color: white;
    background-color: rgba(0,0,0,.75);
    border-radius: 3px;
    text-align: center;
    padding: 15px;
    margin: auto;
    position: absolute;
    right: 5%;
    cursor: pointer;
}
</style>    
<script>
function toggleDisplay() {
    var pi = document.getElementById('photo-index');
    var displaySetting = pi.style.display;
    var toggle-button = document.getElementById('toggle-button');
    var showTaxonomy = 'Show Taxonomy';
    var showImages = 'Show Images';
    if (displaySetting == 'none') {
    pi.style.display = 'grid';
    toggle-button.innerHTML = showImages;
    }
    else {
    pi.style.display = 'none';
    toggle-button.innerHTML = showTaxonomy;
    }
}
</script>
</head>
<body>
<div onclick="toggleDisplay()" id="toggle-button">Show Taxonomy</div>
<div id="photo-index">Large Grid of Stuff</div>
</body>
</html>

标签： javascriptcssgridtoggledisplay

解决方案

变量声明中有一个错误toggle-buttonis not a valid variable in JavaScript，所以使用toggle_button. JavaScript 变量不允许在变量声明中使用连字符，因为它被视为算术运算符。

function toggleDisplay() {
    var pi = document.getElementById('photo-index');
    var displaySetting = pi.style.display;
    var toggle_button = document.getElementById('toggle-button');
    var showTaxonomy = 'Show Taxonomy';
    var showImages = 'Show Images';
    if (displaySetting == 'none') {
    pi.style.display = 'grid';
      toggle_button.innerHTML = showImages;
    }
    else {
      pi.style.display = 'none';
      toggle_button.innerHTML = showTaxonomy;
    }
}
#photo-index {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 0px;
  background-color: #4f6b6f;
}
#toggle-button {
    color: white;
    background-color: rgba(0,0,0,.75);
    border-radius: 3px;
    text-align: center;
    padding: 15px;
    margin: auto;
    position: absolute;
    right: 5%;
    cursor: pointer;
}
<div onclick="toggleDisplay()" id="toggle-button">Show Taxonomy</div>
<div id="photo-index">Large Grid of Stuff</div>

推荐阅读