选择具有可变数据属性的元素，但有些元素带有破折号

Question

所以我正在为 select 一个单击的 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' 但这也与命名标准冲突。

那么我该如何解决这个问题呢？我需要一个正则表达式来再次分离这个词吗？那是唯一的方法吗？

Answer 1

您的假设略有偏差。 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>

如果您不想替换数据名称，可以使用更改大写字母的函数映射数据集。这可能比解析原始 HTML:

更容易

const dataset = [
  'categoryName',
  'categoryTotal',
  'camelCase',
  'snake_case'
];
const lowercase = dataset
  .map( str => {
    const capital_letters = str.match( /[A-Z]/g );
    if ( capital_letters ) {
      return capital_letters.reduce(( result, capital ) => {
        return result.replace( capital, `-${ capital.toLowerCase() }` );
      }, str );
    }
    else return str;
  });
console.log( lowercase );

选择具有可变数据属性的元素，但有些元素带有破折号

Selecting element with variable data attribute, however some with dash

javascript

jquery

jquery-selectors