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");