JavaScript 显示/隐藏 html 元素答案

【问题标题】：JavaScript show / hide html elementsJavaScript 显示/隐藏 html 元素
【发布时间】：2018-06-01 11:50:31
【问题描述】：

有没有更简洁的方式在 JavaScript 中实现这一点，我正在尝试基于点击功能显示/隐藏项目

var overview = document.getElementById("overview"); 
var schedule = document.getElementById("schedule");
var reports = document.getElementById("reports");

    function btnOverview_Click() {
        schedule.style.display = "none";
        reports.style.display = "none";
        overview.style.display = "block";
    }       
    function btnSchedule_Click() {
        overview.style.display = "none";
        reports.style.display = "none";
        schedule.style.display = "block";
    } 
    function btnReports_Click() {
        overview.style.display = "none";
        schedule.style.display = "none";
        reports.style.display = "block";
    }

【问题讨论】：

请显示一些 HTML 标记 - 您嵌套元素的方式可能会有所帮助
“是否有更简洁的方法来实现这一点”如果您只想显示/隐藏一些元素，那么我会拒绝。但是，如果您可以访问 html 并希望获得类似标签或类似手风琴的功能，那么 - 是的。您可以使用类和数据属性使代码更通用。
你想要另一种方式，比如不改变显示属性还是想要更好的代码来做同样的事情
更好的代码来做同样的事情——也许我错了，但这似乎是一个非常“臃肿”的解决方案。所有元素都处于相同的“级别”——我不想通过它们的选择器访问它们——它们的位置、id、类可能会改变。

标签： javascript

【解决方案1】：

避免所有可能的内联样式和 JavaScript，
我建议您执行以下操作：

// I added a class in your HTML
var elements = document.querySelectorAll(".myClass");
var buttons = document.querySelectorAll(".myButtons");

// Function to hide all "elements" except the one we clicked
function hideExceptThis() {
  elements.forEach(elm => elm.style.display = "none");
  // Get the value in "data" attribute
  var id = this.getAttribute("data"); // "this" refers to the one you clicked
  document.querySelector(id).style.display = "block";
}

// On load, bind the above function on click for each element
buttons.forEach(but => but.addEventListener("click", hideExceptThis));

#panel {
  border-bottom: 1px solid gray;
  background: #eee;
  padding: 8px;
}

.myClass {
  width: 240px;
  height: 40px;
  margin: 8px;
  padding: 8px;
}

#overview { background-color: #fdd; }
#schedule { background-color: #dfd; }
#reports  { background-color: #ddf; }

<div id="panel">
  <button class="myButtons" data="#overview">Only overview</button>
  <button class="myButtons" data="#schedule">Only schedule</button>
  <button class="myButtons" data="#reports">Only reports</button>
</div>
<div class="myClass" id="overview">Overview</div>
<div class="myClass" id="schedule">Schedule</div>
<div class="myClass" id="reports">Reports</div>

希望对你有帮助。

【讨论】：

我认为绝对更好。为了使其 100% 完美，请使用 elements.forEach(e=>e.style.display="none") 和 elements.forEach(e=>e.addEventListener("click", hideExceptThis))
@Attersson 感谢您的建议，我已将.getElementsByClassName() 更改为.querySelectorAll() 以便能够应用它。
@Attersson，使用.getElementsByClassName()，它说elements.forEach is not a function。 stackoverflow.com/questions/24266313/…
没什么意义，因为它是一个数组（哇哦。HTMLCollection）。也许[].forEach.apply(e=>{e.style.display="none";}, elements)
上面隐藏了“按钮”（点击的项目） - 我试图隐藏以下内容： var overview = document.getElementById("overview"); var schedule = document.getElementById("schedule"); var reports = document.getElementById("reports");

【解决方案2】：

这不是很干净，但至少它节省了一些代码行。

将this（触发函数的元素）传递给您的函数并将所有元素设置为display: none;，但将被点击的元素设置回display: block;。

var overview = document.getElementById("overview");
var schedule = document.getElementById("schedule");
var reports = document.getElementById("reports");

function hide(element) {
  overview.style.display = "none";
  schedule.style.display = "none";
  reports.style.display = "none";
  element.style.display = "block";
}

<div id="overview" style="width: 100px; height: 15px; background-color: green" onclick="hide(this)"></div>
<div id="schedule" style="width: 100px; height: 15px; background-color: yellow" onclick="hide(this)"></div>
<div id="reports" style="width: 100px; height: 15px; background-color: blue" onclick="hide(this)"></div>

【讨论】：

啊！所有的内联样式和脚本！…
@TakitIsy 确实如此。 :p
@TakitIsy +1 为您的回答，它比我的要好得多。 x)
谢谢，非常感谢！ :)
@EdwardDoyle 我认为你没有评论正确的答案...... ;) CodeF0x，很抱歉偷了你的“正确答案”！