选择具有可变数据属性的元素，但有些带有破折号
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择具有可变数据属性的元素，但有些带有破折号相关的知识，希望对你有一定的参考价值。
所以我正在创建一个函数来选择一个单击的span元素，具体取决于它的数据属性及其值。我做的
function moveFilterElements(event) {
if ($(event).hasClass('active')) {
var dataAttributes = $(event).data(),
dataKey = Object.keys(dataAttributes)[0],
dataValue = dataAttributes[Object.keys(dataAttributes)[0]];
$(event).parents('.filters-container').find('.label[data-' + dataKey + '=' + dataValue + ']').toggleClass('active');
$(event).parents('.filters-container').find('.btn-show-filters').find('.label[data-' + dataKey + '=' + dataValue + ']').remove();
updateFiltering();
}
else {
var clonedActiveItem = $(event).clone(true);
$(event).parents('.filters-container').find('.filters-selected').append(clonedActiveItem);
clonedActiveItem.toggleClass('active');
$(event).toggleClass('active');
updateFiltering();
}
}
F.ex数据属性如下所示：'data-subject' - 工作正常。
由于html DOM标准，'data-category-name'转换为'categoryName'。
我可以通过命名'data-categoryname'来绕过这一点，但这也与命名标准冲突。
那么我该如何解决这个问题呢？我需要一个正则表达式再次分开这个词吗？这是唯一的方法吗？
答案
你的假设略有偏差。如果使用元素的数据集，则data-category-name仅变为categoryName。
这不适用于getAttribute：
const div = document.querySelector( '#data_example' );
const category_from_dataset = div.dataset;
console.log( JSON.stringify( category_from_dataset ));
// When using the dataset, we need to use javascript camelcase to access the DOMStringMap
console.log( category_from_dataset.categoryName );
// When using getAttribute, we can use the written attribute name which will automaically covnert to the correct camelcase of the dataset.
const category_from_attribute = div.getAttribute( 'data-category-name' );
console.log( category_from_attribute );<div id="data_example" data-category-name="examples">An Example</div>以上是关于选择具有可变数据属性的元素，但有些带有破折号的主要内容，如果未能解决你的问题，请参考以下文章