链接 val()、text() 和 data() 的问题 [重复]答案

【问题标题】：Problems chaining val(), text() and data() [duplicate]链接 val()、text() 和 data() 的问题 [重复]
【发布时间】：2022-10-01 07:24:50
【问题描述】：

我有以下 JavaScript/jQuery：

$select.append($(\"<option />\")
    .val(this.id)
    .text(this.text)
    .data(\'name\', this.name)
    .data(\'isstorage\', this.isstorage));

它正确设置了<option> 标签的value 和文本值。但它没有设置data-name 或data-isstorage 属性。

有人可以告诉我我在这里有什么问题吗？

完整示例：

var $select = $(\'#myselect\');

var x = {
  id: \'id\',
  text: \'text\',
  name: \'name\',
  isstorage: \'isstorage\'
};

$select.append($(\"<option />\")
    .val(x.id)
    .text(x.text)
    .data(\'name\', x.name)
    .data(\'isstorage\', x.isstorage));

<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>
<div>
  <select id=\"myselect\" />
</div>

你能把它变成minimal reproducible example吗？
.data 不是用来设置属性的，它是用来设置数据集属性的。如果您想实际查看属性，请使用.attr(\'data-name\', this.name);
@SuperStormer：添加
@RobertMcKee：我觉得这很混乱。 $el.data(\'name\') 返回 data-name 属性的值。你是说$el.data(\'name\', \'abc\') 没有设置？
是的，它没有设置属性。实际发生的是 data-* 属性被消耗并加载到元素的 dataset 属性中。 Jquery 将在那里读取/设置值，但它是一张单程票，设置的值不会返回到 data-* 属性。内容在那里.. 将console.log($(\'#myselect option:first\').data(\'name\')) 添加到代码笔的底部，您将在控制台中看到它输出名称。

标签： javascript jquery

【解决方案1】：

尝试

.attr('data-name', this.name)
.attr('data-isstorage', this.isstorage));

.data() 用于解析而不是设置内容

【讨论】：