顯示類股利和隱藏以前 -

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