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

Question

我实际上使用的脚本允许我显示div onclick并隐藏其他人但现在我需要对＆＃34; class＆＃34;而不是＆＃34; id＆＃34;。

我目前的剧本：

XPath="/items/item[menuType='Lunch']"

我尝试使用getElementsByClassName：

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="menuItems.xml" XPath="/items/item[menuType='Lunch']"></asp:XmlDataSource>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
    <ItemTemplate>
        <%# XPath("menuType") %>
        <br />
        <%# XPath("itemName") %>
        <br />
        <%# XPath("price") %>
        <br />
        <%# XPath("preparationTime") %>
        <hr />
    </ItemTemplate>
</asp:Repeater>

有什么想法吗？

编辑：我当前脚本的一个工作示例，其中包含＆＃34; id＆＃34; ：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 = ...放在click处理程序中，这样您才能获得该数组的实时版本。此外，您需要将.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();