Question

在jQuery click事件监听器中，我有一些代码如下：

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

作为Brian points out，您可以访问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属性返回没有data前缀的camel情况下的属性名称。换句话说，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]);

修改

或者感谢@Brian's comment我可以将其重写为：

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

jQuery抓取动态data- *属性的值

3 个答案:

修改