HTML 数据属性没有改变

问题描述

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

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

当我点击设置数据时，它应该将数据属性为“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>

解决方法

问题是因为在您调用 #setdata 的 setter 时，tag 点击处理程序中的 data() 包含一个 jQuery 对象。它不保存数据属性的值。

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

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

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>