HTML数据属性不变[重复]

Question

我有这个 Html 代码，在每个段落标签中都有两个数据属性“数据标签”和“数据名称”。我还有两个按钮，“显示数据”和“设置数据”。

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

当我点击设置数据时，它应该将所有带有数据属性“标签”的段落标签更改为“完成”，但它不起作用。我做错了什么？

$("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 在您调用data() 的setter 时持有一个jQuery 对象。它不保存数据属性的值。

为此，您需要调用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>