JavaScript-查找与数据属性值匹配的ID

我有一个变量，用于查找在回调函数中单击的元素的数据属性：

var dropdown = document.getElementsByClassName('js-dropdown');

 for (i = 0; i < dropdown.length; i++) {

   dropdown[i].addEventListener("click", callBack (dropdown[i]));

 }

function callBack (i) {

 return function () {

  var thisDropdown = i.getAttribute('data-dropdown');

  //rest of the code here

  }

}

…但用香草JS。

使用jQuery可以很好地工作，但是我想要一个普通版本

因此，当用户单击激活下拉列表的元素时，我希望它在文档中动态查找其相关ID匹配值，以便切换显示/隐藏类

我已经搜索了很多SO问题，每个人都用jQuery回答，这不是我想要的

我一直在努力按照

var idValue = document.getElementById(thisDropdown);

然后

显然，这与jQuery语句的工作方式不同。。。有什么想法吗

忽略toggleClass方法！你们中的一些人可能会发现这一点很矛盾，因为我想要vanilla JS。

替换

$（“#”+thisDropdown）对于普通js，使用。像这样：

const someElement = document.querySelector('#' + thisDropdown);
someElement.classList.toggle("is-active");

替换
$（'#'+thisDropdown）.toggleClass（'is-active'）对于普通js，使用。像这样：

const someElement = document.querySelector('#' + thisDropdown);
someElement.classList.toggle("is-active");

我喜欢@kamyl的答案，但您可能需要向后兼容。为此，请查看是否可以找到多边形填充

如果您必须自己编写，请使用
string.split（“”）
获取活动属性列表，并迭代查找它是否存在；如果没有，请添加，如果有，请删除…然后
数组。加入（“”）
并用它替换class属性。
我喜欢@kamyl的答案，但您可能需要向后兼容。为此，请查看是否可以找到多边形填充

如果您必须自己编写，请使用
string.split（“”）
获取活动属性列表，并迭代查找它是否存在；如果没有，请添加，如果有，请删除…然后
数组。加入（“”）
并用它替换class属性。
$（idValue）。切换class（'is-active'）
？@MrGeek他说他不想要jQuery解决方案。Vanilla JS
$（idValue）.toggleClass（'is-active'）
？@MrGeek他说他不想要jQuery解决方案。香草JS
const someElement = document.querySelector('#' + thisDropdown);
someElement.classList.toggle("is-active");