的JavaScript - 查找數據屬性值

匹配ID我有一個發現，被點擊了一個回調函數元素的數據屬性的變量：的JavaScript - 查找數據屬性值

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，所以你們中的一些人可能會發現這個矛盾。

來源

2017-09-29 TheJCD

'$（idValue）.toggleClass（'is-active'）'？ –

@MrGeek他說他不想要jQuery解決方案。香草JS –

要用plain js替換$('#' + thisDropdown).toggleClass('is-active');，請使用Element.classList。像這樣：

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

來源

2017-09-29 14:52:42 kamyl

我喜歡@ kamyl的回答，但是您可能需要向後兼容。爲此，看看你是否能找到一個polyfill。

如果你自己寫有，請使用string.split(" ")來獲取你的活動屬性列表並迭代查找它是否存在;如果沒有則添加，如果是，則刪除...然後array.join(" ")並用它替換class屬性。

來源

2017-09-29 15:00:18 theGleep

的JavaScript - 查找數據屬性值

回答

相關問題