jQuery data() 无法写入 HTML 元素

Question

HTML：

<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

j查询：

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
});

正在正确检索catid，但未添加到输入元素中。怎么来了，我该如何解决这个问题？

Answer 1

如果您希望data在DOM中可见，则需要使用.attr((。

注意：catid不是"允许"属性。你应该写data-catid在这里阅读更多关于它的信息

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").attr("data-catid", catid);  // see changes in this line
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

更新 .data(( 确实有效！但正如文档所说：该值仅设置为元素并不意味着它在 DOM 中可见。

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
  
  // now "catid" is set to .search-input
  // it's just not visible in DOM 
  console.log('catId: ' + $(".search-input").data("catid"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

Answer 2

未添加到输入元素

没错，这不是.data()的工作方式。 当使用.data()添加数据时，它存储在jquery内部，所以你通过jquery再次读取它，而不是通过查看html或使用vanilla javascript来读取它。

将从任何匹配的data-属性中读取初始值，但之后它使用内部值。

例：

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".search-input").data("catid", catid);
});
$(".readdata").click(function() {
  console.log($(".search-input").data())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class="readdata">Read Data</button>
<button type='button' class="add-new-item" data-catid="1">Add Data</button>
<input class="search-input" type="text" name="search" placeholder="Start typing to search">
<button type='button' class="readdata">Read Data</button>

还有一个区别在于，.data()将尝试为您推断数据类型(因此您可以得到一个数字(，而.attr()将始终是一个字符串。