显示类 div 并隐藏上一个 - 纯 javascript

Question

我实际上使用了一个脚本，它允许我在点击时显示一个 div 并隐藏其他人，但现在我需要用“class”而不是“id”来做同样的事情。

我当前的脚本：

function layout(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
    var oldDiv = document.getElementById(hiddenVal.Value); 
    oldDiv.style.display = 'none'; 
}

var tempDiv = document.getElementById(divName); 
tempDiv.style.display = 'block';              

hiddenVal.Value = document.getElementById(divName).getAttribute("class");}

我尝试使用 getElementsByClassName ：

function layoutNEW(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
    var oldDiv = document.getElementById(hiddenVal.Value); 
    oldDiv.style.display = 'none'; 
}
var tempDiv = document.getElementsByClassName(divName);
for ( var i=0, len=tempDiv.length; i<len; ++i ){
    tempDiv[i].style.display = 'block';  
}
hiddenVal.Value = document.getElementById(divName).getAttribute("id");}

有什么想法吗？

编辑：我当前带有“id”的脚本的工作示例：JSFiddle

编辑 2： 效果很好，但是当 div（类）被克隆时，只有其中一个显示 div。你对此有什么想法吗？演示这种情况的 JSFiddle 在哪里：JSFiddle

Answer 1

我认为这就是您所需要的。这个想法是您可以在<a> 标签上使用数据属性，它会告诉您的点击处理程序在显示元素时要查找哪个类名。从那里，你只是隐藏其他人。这是一个工作演示：

var toggleControls = document.querySelectorAll("[data-trigger]");
var contentDivs = document.querySelectorAll(".toggle");
for (var i = 0; i < toggleControls.length; i++) {
  toggleControls[i].addEventListener("click", function(event) {
    var trigger = event.target;
    var selector = "." + trigger.getAttribute("data-trigger");
    var divToShow = document.querySelector(selector);
    for (j = 0; j < contentDivs.length; j++) {
      contentDivs[j].style.display = "none";
    }
    divToShow.style.display = "block";
  });
}

.toggle {
  height: 100px;
  width: 100px;
  display: none;
}
.div1 {
  background-color: red;
}
.div2 {
  background-color: blue;
}
.div3 {
  background-color: purple;
}
.div4 {
  background-color: green;
}

<a href="#" data-trigger="div1">Show Div1</a>
<br/>
<a href="#" data-trigger="div2">Show Div2</a>
<br/>
<a href="#" data-trigger="div3">Show Div3</a>
<br/>
<a href="#" data-trigger="div4">Show Div4</a>
<div class="toggle-container">
  <div class="toggle div1"></div>
  <div class="toggle div2"></div>
  <div class="toggle div3"></div>
  <div class="toggle div4"></div>
</div>

编辑 - 根据更新的问题

为了让它与动态创建的元素一起工作，您必须将var contentDivs = ... 放在点击处理程序中，这样您就可以获得该数组的实时版本。此外，您需要将.querySelector 更改为.querySelectorAll，因为前者只抓取第一个匹配元素，而不是像后者那样全部抓取。

代码如下所示：（注意 - 我还将点击处理程序移到了外部函数中，因此不会为循环的每次迭代重新创建它，这是一种很好的做法）

function clickHandler(event) {
    var contentDivs = document.getElementsByClassName("toggle"); // get live set of contentDivs in case any were added dynamically
    var trigger = event.target;
    var selector = "." + trigger.getAttribute("data-trigger");
    var divsToShow = document.querySelectorAll(selector); // grab all matching divs
    for (var i = 0; i < contentDivs.length; i++) {
        contentDivs[i].style.display = "none";
    }
    for (var j = 0; j < divsToShow.length; j++) {
        divsToShow[j].style.display = "block";
    }
}
var toggleControls = document.querySelectorAll("[data-trigger]");
for (var i = 0; i < toggleControls.length; i++) {
  toggleControls[i].addEventListener("click", clickHandler);
}


function cloneDiv() {                
  var elmnt = document.getElementsByClassName("container");

  for ( var i=0; i<elmnt.length; i++ ) {
    var cln = elmnt[i].cloneNode(true);
  }
  document.body.appendChild(cln);
  document.getElementById("clone").appendChild(cln);
}
window.onload = cloneDiv();