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>

jQuery的：

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

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

Answer 1

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

注意：catid不是“允许”属性。您应该写data-catid read more about it here

$(".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()将始终是一个字符串。

jQuery data（）无法写入HTML元素？

2 个答案: