javascript - 从函数中获取数据属性

Question

我正在尝试data-io从我的函数中获取属性。

<input id="42297" class="edit flatpickr-input active" data-io="in" value="14:23" type="text" readonly="readonly">

onChange: function(selectedDates, time, instance){

使用此代码，我可以得到我的输入 id：instance.input.id
但我无法弄清楚如何访问该data-io属性。

我试过了：

instance.input.data-io
instance.input.data('io')
instance.input.attr('data-io')
instance.input.attr('io')

我应该怎么做？

Answer 1

使用instance.input.dataset.io. 此处有关 data-* 属性的更多信息： https ://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 2

由于使用jQuery使用 data-api：

$('#42297').data('io'); // -> in

请记住，id应该以字母开头。

---

如果您instance.input是 JS 对象，请将其转换为 jQuery：$(instance.input).data('io')

Answer 3

如果您使用 jquery，请使用.data('io')或attr('data-io')。如果使用 vanilla js，请使用Element.getAttribute()。

var inp = document.getElementById('42297');
console.log(inp.getAttribute('data-io'));
var $inp = $('#42297');
console.log($inp.data('io'));
console.log($inp.attr('data-io'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="42297" class="edit flatpickr-input active" data-io="in" value="14:23" type="text" readonly="readonly">