jQuery选择器和HTML5 data- *属性动态设置

Question

我有这个工作：

  <div data-people="australian">Australian people eats...</div>

  <script type="text/javascript">
    alert($("[data-people=australian]").html());
  </script>

但是这个不起作用，我不知道如何解决：

  <div id="mich">Australian people eats...</div>

  <script type="text/javascript">
    $("#mich").data("people", "australian");

    alert($("[data-people=australian]").html());
  </script>

为什么我不能从jQuery设置data- * HTML5属性并使用它们来选择DOM对象？

非常感谢

Answer 1

jQuery data（）映射的data-属性是单向的。如果要在节点上实际设置属性，则应使用attr（）函数。

$("#mich").attr("data-people", "australian");

来自docs:

  

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（然后所有数据值都内部存储在jQuery中）