如何使用 jQuery Quicksand 检索单击项目的'data-id”属性？

在 jQuery Quicksand 中检索单击项目的 Data-id 属性

使用 jQuery Quicksand 插件时，获取单击元素的 data-id 属性对于将其传递给 Web 服务或执行进一步的操作。本文旨在为这一需求提供全面的解决方案。

Quicksand 插件允许您动态排序或过滤元素，而无需重新加载页面。要将点击事件绑定到已排序或已过滤的元素，请使用 .on() 方法。但是，有必要访问 data-id 属性来检索与单击的元素关联的特定信息。

获取 Data-id 属性

要检索 data-id 属性值，jQuery提供两种方法：

使用.attr():

此方法直接以字符串形式检索属性值。

$(this).attr("data-id")

使用 .data():

在 jQuery 1.4.3 中发布，此方法以解析的数据类型检索属性值（如果可能）。

$(this).data("id")

示例实现

考虑以下 HTML 和 JavaScript 代码：

$("#list li").on('click', function() {
  let dataId = $(this).attr("data-id") || $(this).data("id");
  alert(dataId);
});

在此示例中，data-id 属性的值可以使用 .attr() 或 .data() 方法进行访问，具体取决于所使用的 jQuery 版本。当点击 data-id="id-40" 的元素时，会出现一个警告对话框，显示该值。

以上是如何使用 jQuery Quicksand 检索单击项目的'data-id”属性？的详细内容。更多信息请关注PHP中文网其他相关文章！