javascript - javascript 中 id/class 属性的策略

Question

假设您有一个帖子列表，并且每个帖子都有一个 ID。

现在可以有许多按钮、字段等与此帖子交互。
(编辑/删除/赞成/标题..仅举几例)

我已将 id 包含在每个可交互的元素中，并用它来引用其他元素。 (例如，当用户单击编辑按钮时，我找到具有相同 id 的文本区域来更改外观)

<div class='post' data-post-id='3'>
  <div class='upvote' data-post-id='3'>
    {{upvote}}
  </div>
  <div class='textarea' data-post-id='3'>
  </div>
  <div class='buttons'>
    <button class='btn-edit' data-post-id='3' />
    <button class='btn-delete' data-post-id='3' />
    <button class='btn-upvote' data-post-id='3' />
  </div>
</div>

我对 javascript 相当陌生，感觉这很尴尬。
是否有更好的方案(或策略)来提供可使用的标识符？

Answer 1

我只需将 data-post-id 放在帖子的顶级 div 上(使用 post 类)。然后，无论何时您需要它，如果您的起点是该 div 中的元素之一，只需使用 closest找到它，例如假设 this 是按钮之一。然后:

var postId = $(this).closest("div.post").attr("data-post-id");

例如，我假设所有这些帖子都在某种容器中，我将其称为 div.container。您可以为各种按钮使用委托(delegate)处理程序，如下所示:

$("div.container").on("click", ".btn-edit", function() {
    var postId = $(this).closest("div.post").attr("data-post-id");
    // ...handle the edit click
});

<小时/>

旁注:我使用 .attr("data-post-id") 来检索上面的帖子 ID。很多人会告诉您使用 .data("post-id")。虽然这有效，但除非您要对数据执行其他操作，否则就太过分了。 .data 方法使用 jQuery 管理的元素外存储来管理与元素关联的数据，并从 data-* 属性初始化该数据。如果您对 data-* 属性的唯一用途是读取它，那么 .data 就太过分了。大多无害，但杀伤力太大。