HTML 数据属性没有改变

Question

我有这个 Html 代码，在每个段落标记中有两个数据属性 'data-tag' 和 'data-name'。我还有两个按钮，'Show Data' 和 'Set Data'。

显示数据 按钮在控制台上正确显示段落数据属性。

当我点击 设置数据 时，它应该将所有具有数据属性 'tag' 的段落标记更改为 'Complete'，但它不起作用。我做错了什么？

$("document").ready(function() {
  // Shows data attributes in console - WORKING
  $("#showdata").click(function() {
    $("p").each(function() {
      var tag = $(this).data("tag");
      var name = $(this).data("name");
      console.log(tag);
      console.log(name);
    });
  });

  // Change data attibute 'tag' - NOT WORKING
  $("#setdata").click(function() {
    $("p").each(function() {
      $(this).data("tag", "Complete");
      console.log($(this).data("tag"));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p data-tag="tag1" data-name="p1">Item 1</p>
<p data-tag="tag2" data-name="p2">Item 2</p>
<p data-tag="tag3" data-name="p3">Item 3</p>

<button class="button" id="showdata">Show data</button>
<button class="button" id="setdata">Set data</button>

Answer 1

问题是因为在 #setdata 单击处理程序中 tag 在您调用 setter[=34 时持有一个 jQuery 对象=] 共 data() 个。它不包含数据属性的值。

为此，您需要调用 data() 的 getter，就像您在 #showdata 单击处理程序中所做的那样。

另请注意，在所有 p 元素上设置相同的 data() 值时，您不需要 each() 循环。

let getData = () => { $("p").each(function() { var tag = $(this).data("tag"); // getter var name = $(this).data("name"); // getter console.log(tag, name ); }); } $("document").ready(function() { $("#showdata").click(getData); $("#setdata").click(function() { $("p").data("tag", "Complete"); // setter getData(); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <p data-tag="tag1" data-name="p1">Item 1</p> <p data-tag="tag2" data-name="p2">Item 2</p> <p data-tag="tag3" data-name="p3">Item 3</p> <button class="button" id="showdata">Show data</button> <button class="button" id="setdata">Set data</button>

HTML 数据属性没有改变

HTML data attribute not changing

jquery

custom-data-attribute