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

Question

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

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

  }

}

我基本上是想这样做

$('#' + thisDropdown ).toggleClass('is-active');

...但是使用香草JS。

使用jQuery可以正常工作，但是我想要一个普通版本。

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

我搜索了很多SO问题，每个人都回答一个jQuery答案，这不是我想要的。

我一直在尝试做一些类似的事情

var idValue = document.getElementById(thisDropdown);

然后

var findId= idValue + thisDropdown;

findId.toggleClass('is-active');

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

忽略toggleClass方法！ 某些人可能会因为我想要香草JS而发现这种矛盾。

Answer 1

替换$('#' + thisDropdown ).toggleClass('is-active'); 对于纯js，请使用Element.classList 。 像这样：

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

Answer 2

我喜欢@kamyl的答案，但您可能需要向后兼容。 为此，请查看是否可以找到一个polyfill。

如果必须自己编写，请使用string.split(" ")获取活动属性列表，并进行迭代以查找是否存在； 如果不是，则添加；如果是，则删除...然后， array.join(" ")并将其替换为class属性。