Javascript：选择多个div ID

Question

我正在使用此答案中的javascript，但是由于我希望将其用于多个页面，有时要显示或隐藏更多或更少的div，所以我想在不列出所有divId的情况下调用该函数。 我尝试使用选择器开始，添加一个类并调用该类，但无法使其正常工作。

我还对divVisibility函数进行了更改（将null替换为divId），因为我希望始终使一个div可见。 这行得通，但是在我看来，第一个功能可能会更严格，因为对于if和else操作，我使用同一行。

任何帮助表示赞赏。

改善我的问题。 这是我在JS第5行进行微小修改的脚本。 它当前可以正常工作，但我不想包含所有的div名称（“ Div1”，“ Div2”，“ Div3”等），并检查是否可以将其进一步收紧。

 var divs = ["Div1", "Div2", "Div3", "Div4"]; var visibleDivId = null; function divVisibility(divId) { if(visibleDivId === divId) { visibleDivId = divId; } else { visibleDivId = divId; } hideNonVisibleDivs(); } function hideNonVisibleDivs() { var i, divId, div; for(i = 0; i < divs.length; i++) { divId = divs[i]; div = document.getElementById(divId); if(visibleDivId === divId) { div.style.display = "block"; } else { div.style.display = "none"; } } } 

 .buttons a { font-size: 16px; } .buttons a:hover { cursor:pointer; font-size: 16px; } 

 <div class="main_div"> <div class="buttons"> <a href="#" onclick="divVisibility('Div1');">Div1</a> | <a href="#" onclick="divVisibility('Div2');">Div2</a> | <a href="#" onclick="divVisibility('Div3');">Div3</a> | <a href="#" onclick="divVisibility('Div4');">Div4</a> </div> <div class="inner_div"> <div id="Div1">I'm Div One</div> <div id="Div2" style="display: none;">I'm Div Two</div> <div id="Div3" style="display: none;">I'm Div Three</div> <div id="Div4" style="display: none;">I'm Div Four</div> </div> </div> 

Answer 1

这是一个答案，其中锚（ <a> ）标记的数量是从html正文中的div元素的数量得出的。 这里也没有jQuery。

如果给<div class="buttons">一个id以及每个inner_div div是一个公共class ，则可以按类名选择所有inner_div元素，并为其生成一个锚标记。

然后，只需将它们全部设置为style="display: none;"即可消除style="display: none;" div的逻辑style="display: none;" 然后只设置style="display: block;" 在与您单击的ID匹配的元素上。

  var divs = document.getElementsByClassName('invizdiv'); /* This bit sets up your anchor tags dynamically depending on how many divs you have with the class 'invizdiv' */ for (var i = 0; i < divs.length; i++) { var listDivId = divs[i].id.slice(); var newAnchor = document.createElement('a'); newAnchor.innerHTML = listDivId; newAnchor.className = "buttons"; newAnchor.href = '#'; newAnchor.setAttribute('targetdiv', listDivId); // console.log(listDivId); newAnchor.addEventListener('click', function(elem, event) { // console.log(elem); // console.log(event); divVisibility(elem.target.getAttribute('targetdiv')); }); document.getElementById('button_list').appendChild(newAnchor); } // here onwards is unchanged var visibleDivId = null; function divVisibility(divId) { var div; for (var i = 0; i < divs.length; i++) { div = divs[i]; div.style.display = "none"; } div = document.getElementById(divId); div.style.display = "block"; } 

 .buttons a { font-size: 16px; } .buttons a:hover { cursor: pointer; font-size: 16px; } 

 <div class="main_div"> <div id="button_list" class="buttons"> <!-- We'll dynamically add here later --> </div> <div class="inner_div"> <div id="Div1" class="invizdiv">I'm Div One</div> <div id="Div2" class="invizdiv" style="display: none;">I'm Div Two</div> <div id="Div3" class="invizdiv" style="display: none;">I'm Div Three</div> <div id="Div4" class="invizdiv" style="display: none;">I'm Div Four</div> </div> </div> 

Answer 2

我看到您在没有jQuery的情况下工作，因此这是没有jQuery的答案。

循环遍历所有inner_div子级，默认情况下将其隐藏，然后显示内容div1。然后，由单击处理程序处理隐藏和显示。

当然，这是一种方法。

 function hideAllContent(){ // loop over the inner_div children and hide them Array.prototype.forEach.call(document.getElementById('inner_div').children, function(v){ v.style.display = 'none'; }) } function divVisibility(divId){ var el = document.getElementById(divId); if(el){ hideAllContent(); el.style.display = 'block'; } } hideAllContent(); divVisibility('Div1'); // open by default with this content 

 .buttons a { font-size: 16px; } .buttons a:hover { cursor:pointer; font-size: 16px; } 

 <div class="buttons"> <a href="#" onclick="divVisibility('Div1');">Div1</a> | <a href="#" onclick="divVisibility('Div2');">Div2</a> | <a href="#" onclick="divVisibility('Div3');">Div3</a> | <a href="#" onclick="divVisibility('Div4');">Div4</a> </div> <div id="inner_div"> <div id="Div1">I'm Div One</div> <div id="Div2">I'm Div Two</div> <div id="Div3">I'm Div Three</div> <div id="Div4">I'm Div Four</div> </div>