如何在 jQuery 中获取附加值 - JavaScript

在 jQuery 中，可以使用 .data() 方法来获取 HTML 元素的附加值。附加值是一种在 HTML 元素中添加任意数据的方法，可以在需要时使用。通过 .data() 方法，可以轻松地检索和使用这些值。

获取单个值

要获取单个附加值，只需将其名称作为参数传递给 .data() 方法。例如，假设你有一个在 HTML 中定义了一个 div 元素，其中包含附加值 myVal：

<div id="my-div" data-my-val="42"></div>

要获取 myVal 的值，可以使用以下代码：

var myVal = $('#my-div').data('my-val');

这将在 myVal 变量中存储值 42。

获取多个值

如果要检索多个附加值，则可以使用 .data() 方法，该方法将返回一个具有多个键值对的对象。例如，如果你的 HTML 中包含以下 div 元素：

<div id="my-div" data-my-val="42" data-my-string="Hello"></div>

可以使用以下代码来检索所有附加值：

var dataObj = $('#my-div').data();

这将在 dataObj 变量中存储以下对象：

{
  myVal: 42,
  myString: "Hello"
}

在事件处理程序中使用附加值

附加值通常用于在 HTML 元素中存储与元素相关的数据。例如，你可以在 button 元素上定义一个附加值，以便在单击按钮时可以执行正确的动作。例如：

<button data-action="delete-item" data-item-id="123">Delete Item</button>

当单击按钮时，可以使用以下 jQuery 代码来检索 data-action 和 data-item-id 并根据其值执行相应的操作：

$('button').click(function() {
  var action = $(this).data('action');
  var itemId = $(this).data('item-id');
  
  if (action === 'delete-item') {
    // delete item with id itemId
  }
});

这将根据所单击 button 元素的不同附加值执行不同的操作。

总结

使用 .data() 方法，可以轻松地检索 HTML 元素中的附加值。通过将附加值添加到 HTML 中，可以轻松地将数据存储在元素中以供后续使用。请记住，附加值是大小写敏感的，因此要确保在 .data() 方法中使用正确的名称。