Question

在html中，我具有按数据属性分组的多个元素，但是此属性不必具有相同的父项：

示例：

<span data-toggle-trigger="1">Resources</span>
<p>......<p>
<span data-toggle-trigger="2">Alpha</span>
<div data-toggle-container="1"></div>
<p>......<p>
<span data-toggle-trigger="3">Beta</span>
<div data-toggle-container="2"></div>
<div data-toggle-container="3"></div>

使用的属性是：

data-toggle-trigger和data-toggle-container

我需要的行为：

当有人单击数据触发触发器时，数据触发容器会发生某些事情（例如显示/隐藏）。

要获取它们：

   triggers = document.querySelectorAll(['data-toggle-trigger']);
    container = document.querySelectorAll(['data-toggle-container']);

好像我有2个选择：

1）获取所有内容并尝试将它们分组 2）仅获取触发器，然后在其后搜索容器

我倾向于1），但我不知道分组的最佳选择。

我幼稚的方法是思考/使用2 for nested loops并循环并比较值，但是我不知道这是否是最佳选择。因此，我正在寻找有关好的方法的意见。

重要-我使用的是纯Javascript而不是ES6语法糖（由于其他原因）。

Answer 1

这是基于意见的，但是我认为最有效的解决方案是仅在<body>上具有1个事件侦听器，并且如果目标具有.dataset.toggleTrigger，则显示/隐藏所有匹配的元素，即querySelectorAll('[data-toggle-container="' + x + '"]')循环播放。

Answer 2

我将添加类来管理您的触发器和容器。例如：Fiddle。在此代码段中，每次您单击触发器时，我都会添加文本。

function myFunction(numberOfTriggerClicked) {
 var element = document.querySelectorAll("[data-toggle-container='"+numberOfTriggerClicked+"']")[0];
 element.innerText += " NEW TEXT";
}

按html元素的数据属性值匹配/分组

2 个答案: