Question

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

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可以正常工作但是我想要一个vanilla版本。

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

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

我一直试图按照

的方式做点什么

var idValue = document.getElementById(thisDropdown);

然后

var findId= idValue + thisDropdown;

findId.toggleClass('is-active');

显然，这与jQuery语句的工作方式不同......任何想法？

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

Answer 1

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

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

Answer 2

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

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

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

2 个答案: