Javascript—引用循环中的某些HTML元素

我正在制作一个简单的Javascript菜单，在包含HTML表单和文本的选项卡之间切换。 为此，我使用了以下代码来分配单击属性，以列出更改类样式设置的元素：

本例中的问题是，代码通过遍历类列表来查找要打开/关闭的元素（container>.class），从而跟踪菜单内容。在每个选项卡中使用纯文本时效果很好，但在使用不同内容（如php回音和循环）时效果较差。我假设这是由于JS考虑了其中一些标记类。
这是代码行：

var target = document.querySelector('.container>.' + e.target.classList[0]);

我正在寻找的替代方案是：

类列表[0]

发布代码的人指出了这个弱点，并建议使用data-*来跟踪我希望影响的元素，但我似乎不知道这会如何影响这一行中的其余语法。我的另一半解决方案目前包括向容器类内的类添加data-*属性

---

欢迎就如何执行此操作提出任何其他建议。

我将更新您的小提琴，了解如何使用数据-*属性：

HTML，添加了数据索引属性：

<ul class="menu">
    <li class="toggle1" data-index="1">One</li>
    <li class="toggle2" data-index="2">Two</li>
    <li class="toggle3" data-index="3">Three</li>
    <li class="toggle4" data-index="4">Four</li>
    <li class="toggle5" data-index="5">Five</li>
</ul>
<div class="container">
    <div class="toggle1" data-index="1">Here are the contents of 1.</div>
    <div class="toggle2" data-index="2">Here are the contents of 2..</div>
    <div class="toggle3" data-index="3">Here are the contents of 3...</div>
    <div class="toggle4" data-index="4">Here are the contents of 4....</div>
    <div class="toggle5" data-index="5">Here are the contents of 5.....</div>
</div>

一个
两个
三个
四个
五个

以下是第1部分的内容。
以下是2.的内容。。
以下是3。。。
以下是4…的内容。。。。
以下是5…..的内容。。。。。

请注意，在选择器中，我选择了具有相同数据索引号的容器的子元素：

var menu_elements = document.querySelectorAll('.menu>li'),
    menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++) {
    menu_elements[i].addEventListener('click', function (e) {
        var target = document.querySelector('.container> [data-index="' + e.target.getAttribute("data-index")+'"]'); // clicked element
        Array.prototype.filter.call(target.parentNode.children, function (siblings) {
            siblings.style.display = 'none'; // hide sibling elements
        });
        target.style.display = 'block'; // show clicked element
    });
}

var menu\u elements=document.queryselectoral（'.menu>li'），
菜单长度=菜单元素长度；
对于（变量i=0；i<菜单长度；i++）{
菜单元素[i]。addEventListener（'click'，函数（e）{
var target=document.querySelector（'.container>[data index=“'+e.target.getAttribute（“数据索引”）+'“]”]）；//单击的元素
Array.prototype.filter.call（target.parentNode.children，函数（兄弟节点）{
sibles.style.display='none'；//隐藏同级元素
});
target.style.display='block'；//显示单击的元素
});
}

data-*是类的属性。因此，您应该使用例如

data count=“5”

来传递属性计数的值5。然后在js端可以使用var count=$（选择器）.data（'count'）；或变量计数=$（选择器）.attr（'data-count'）；您确实在类中添加数据-*？你是什么意思？@LelioFaieta因为这个问题没有

jquery

标记，所以你真的应该提到用纯JavaScript的方式获取数据属性。我更喜欢

.getAttribute（“数据计数”）或新的
数据集
API。这个问题的本质就是让JS循环找到每个元素，每个元素里面都有一个数据标签。只要我有一个方法“标记”受此循环影响的元素，实际值就无关紧要。最初，它会遍历每个类，然后开始将click事件添加到我想要影响的类中。（在小提琴的容器下切换div类。）@JeremyJStarcher你说得对。我更专注于理解他在“向容器类内的类添加数据-*属性”时所指的内容。@JeremyJStarcher我已经尝试过：“var target=document.querySelector（'.container>“+e.target.getAttribute（“数据计数”）；”但没有起作用。很可能是因为这并不像“container>.class”那样引用实际的元素名。它只是一个容器，后面跟着一个随机的数据字符串。非常感谢。这是我找不到的语法。另外，顺便说一句，{debugger标记的作用是什么？我删除了
调试器；
，如果你想检查一些东西，它基本上是代码中的一个断点。我总是在检查小提琴时添加它，然后在最后删除它