Показать класс div и скрыть предыдущий - чистый javascript

Question

Я фактически использовал сценарий, который позволил мне показать div onclick и скрыть других, но теперь мне нужно сделать то же самое с «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");} 

Любые идеи?

EDIT: рабочий пример моего текущего сценария с «ID»: JSFiddle

EDIT 2: Он отлично работает, но когда ДИВ (класс) клонируют, только один из них показывает 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>

EDIT - В соответствии с обновленным вопрос

Для того, чтобы получить эту работу с динамически создаваемых элементов, вы должны поставить 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();