显示类股利和隐藏以前 -

Question

实际上，我是用这让我的onclick显示一个div并隐藏其他的脚本，但现在我需要做同样的“类”，而不是“ID”纯JavaScript。

我当前的脚本：

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();