javascript - 当我尝试附加数据ID时；我有一个错误

Question

检查一下：这是一个可以正常工作的简单代码

html

<select></select>
<button id="btn1">click me</button>

js

$('#btn1').on('click',function(){
    var select = $('select');
    select.append($('<option>').val('v2').text('text2'));
});

当我尝试附加 data-id 时，出现错误。有什么帮助吗？

select.append($('<option>').val('v2').text('text2').data-id('id1'));

score 2 · Accepted Answer

你可以通过两种方式做到这一点

select.append($('<option>').val('v2').text('text2').attr('data-id','id1'));

或者

select.append($('<option>').val('v2').text('text2').data('id', 'id1'));

score 1 · Accepted Answer

正确的使用方法是data()：

select.append($('<option>').val('v2').text('text2').data('id','id1'));

或者，如果您想要一个实际属性，您可以使用attr()：

select.append($('<option>').val('v2').text('text2').attr('data-id','id1'));

score 1 · Accepted Answer

首先，data-id字符串在 JS 中是非法标识符（因为它包含连字符），因此即使它可以作为 jQuery 对象方法使用，你也应该这样调用它......

someObj['data-id'](someId);

显然，对于这样一个简单的操作来说，这太混乱了。事实上，在 jQuery.prototype 中没有定义这样的方法——而是希望您使用attr()（显式设置任何属性）或data()（特定于数据集 API 的属性）。

作为旁注，您不必打那么多电话：这...

select.append($('<option>', {
  value: 'v2',
  text: 'text2',
  'data-id': 'id1'
}));

... 更具可读性和效率。注意 'data-id' 周围的引号：对象属性只有在它们是正确的 JS 标识符时才可以不加引号。

3 回答 3