从函数中获取数据属性答案

【问题标题】：get data-attribute from function从函数中获取数据属性
【发布时间】：2017-10-06 10:15:59
【问题描述】：

我正在尝试从我的函数中获取 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-ioattribute。

我试过了：

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

我该怎么办？

【问题讨论】：

试试.dataset.io。
@Walk 工作就像一个魅力。请写下来作为答案！
好的，我马上就去，很高兴它成功了。

标签： javascript jquery flatpickr

【解决方案1】：

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

【讨论】：

【解决方案2】：

由于使用jQuery使用data-api：

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

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

如果你的instance.input是JS对象，把它转换成jQuery：$(instance.input).data('io')

【讨论】：

Keep in mind that id should start with letter. 仅供参考，数字 id 属性在 HTML5 中很好
@RoryMcCrossan 是的，我知道，这就是为什么不是it must be

【解决方案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">

【讨论】：