querySelectorAll 查找匹配的数据属性

Question

我的应用程序使用 Parse 后端来保存我和我的朋友感兴趣的我所在地区所有音乐会的运行列表。

在主页上，我使用解析查询为数据库中存储的每个节目显示一个模块。创建每个模块时，我使用此代码将数据属性添加到节目的最外层 div，对应于解析中节目的对象 ID：

var showId = object.id;
$("div.show_module:last").data("showId", showId);

当用户单击节目的模块时，我能够成功检索特定节目的 showId：

$("#showsList").delegate(".showModuleBody", "click", function() {
    var storeObjectId = $(this).closest("div.show_module").data("showId");
});

一切都很好，证明分配数据属性是有效的。

我遇到麻烦的地方是尝试在给定页面上查找具有特定数据属性或该属性的特定值的元素。最终目标是获取该 div 的 y 偏移量，以便我可以将页面滚动到适当的位置。我以为我可以使用以下代码来查找该元素，但它不起作用 -

// find all elements with class .show_module
var allShows = document.querySelectorAll('.show_module');

// find all elements with showId data attribute
var showsWithShowId = document.querySelectorAll('[data-showId]');

// find all elements with a specific showId data attribute
var showToFind = document.querySelectorAll("[data-showId='2']");

这三个查询中的第一个有效，证明在我调用此函数时，我感兴趣的所有元素都已加载到页面中，但第二个和第三个查询不返回任何内容。

知道我在这里做错了什么吗？与语法有关吗？querySelectorAll 是否与我设置数据属性的方式不兼容？

我尝试只包含我认为重要的代码部分，但如果需要更多内容，请告诉我。

Answer 1

jQuery 的.data方法不会创建 HTML 属性，而是将其内部数据存储中的值与元素关联起来。

如果你想用 jQuery 设置数据属性，那么你需要使用：

$("div.show_module:last").attr("data-showId", showId);

要获取该值，您可以使用.data('showId')或.attr('data-showId')。

（请注意，HTML 属性不区分大小写，因此您也可以编写“data-showid”。）