jQuery 获取动态数据-* 属性的值

Question

在 jQuery 单击事件侦听器内部，我有一些这样的代码：

function (evt) {
  evt.preventDefault();

  var reportbox = $(this).closest('.activityItem');
  var id = reportbox.data('questionId');
  ...
}

这适用于 data-question-id 属性，但我现在要概括该函数，我需要从以下任何一个中获取值：

data-question-id
data-answer-id
data-comment-id
data-user-id
data-company-id

最好的方法是什么？

Answer 1

如果您知道这些属性中只有一个会出现，并且您想检索该单个值，您可以使用此方法：

var element = $(el);
var dataAttrs = ['question-id', 'answer-id', 'comment-id', 'user-id', 'company-id'];
var data = getUnknownAttr(element, dataAttrs);


function getUnknownAttr(element, potentialAttrs) {      
    var $element = element instanceof $ ? element : $(element);
    var result = null;

    potentialAttrs.forEach(function (attr) {
        var temp = $element.data(attr);
        if (typeof temp !== 'undefined') {
            result = temp;
        }
    });

    return result;
}

Answer 2

作为 , you could access the dataset property 检索元素的所有 data-* 属性：

$('.activityItem').each(function () {
  var dataAttributes = this.dataset;

  Object.keys(dataAttributes).forEach(function (key) {
    console.log(key, dataAttributes[key]); // key, value
  });
});

因为您只需要第一个数据属性，您可以简单地使用：

var dataAttributes = this.dataset;
var id = dataAttributes[Object.keys(dataAttributes)[0]];

重要的是要注意 dataset 属性 returns 驼峰式的属性名称没有 data 前缀。换句话说，data-question-id 将是 questionId。

如果要检索元素的所有属性，请访问 attributes 属性并检查哪些属性以 data-* 开头并以 -id 结尾。它肯定更冗长，但在其他情况下可能会更好。

$('.activityItem').each(function () {
  var attributes = this.attributes;

  Object.keys(attributes).forEach(function (key) {
    var attribute = attributes[key];

    if (/^data-.*-id$/.test(attribute.name)) {
      console.log(attribute.name, attribute.value);
    }
  })
});

Answer 3

我刚想到我要找的东西。我想我的问题让您感到困惑，但这就是我想要的：

$('#test').children().each(function () {
  var reportbox = $(this);

  var id = reportbox.data(Object.keys(reportbox.data())[0]);
  
  reportbox.text(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <div data-question-id="1"></div>
  <div data-answer-id="2"></div>
  <div data-comment-id="3"></div>
  <div data-user-id="4"></div>
  <div data-company-id="5"></div>
</div>

焦点线是：

var id = reportbox.data(Object.keys(reportbox.data())[0]);

编辑

或者感谢我可以将其重写为：

var id = this.dataset(Object.keys(this.dataset)[0]);

jQuery 获取动态数据-* 属性的值

jQuery grabbing value of a dynamic data-* attribute

javascript

jquery

custom-data-attribute

编辑