时间戳

首页 > 解决方案 > 选择具有可变数据属性的元素，但是有些带有破折号

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

问题描述

所以我正在制作一个函数来选择一个单击的 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'。

我可以通过将它们命名为“数据类别名称”来绕过它，但这也与命名标准冲突。

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

标签： javascriptjqueryjquery-selectors

解决方案

您的假设略有偏差。仅当您使用元素的数据集时，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 );

推荐阅读