Question

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

现在可以有很多按钮，字段等与这篇文章互动（编辑/删除/ upvote / title ..仅举几例）

我在每个交互元素中都包含了id，并用它来引用其他元素。（例如，当用户单击编辑按钮时，我会找到具有相同ID的textarea来更改外观）

<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>

我对javascripts相当新，觉得这很尴尬是否有更好的方案（或策略）来提供标识符？

Answer 1

我只需将data-post-id放在帖子的顶级div上（使用班级post）。然后，只要您需要它，如果您的起点是div中的元素之一，只需使用closest来查找它，例如假设this是其中一个按钮。然后：

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

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

$("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管理的off-element存储管理与元素关联的数据，从data-*属性初始化该数据。如果您只使用data-*属性来阅读它，那么.data就太过分了。大多数是无害的，但是过度杀伤。

Answer 2

更简单的审议就是这样

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

现在，当用户点击按钮时，您可以执行以下操作：

$('button').click(function(){
    console.log($(this).parents('.post').data('post-id'))
})

所以当您应用编辑时，它就像是

$('div[data-post-id="3"].textarea')

确定您需要将“3”替换为您从上一个函数获得的ID。

编辑：

正如T.J. Crowder所说，你可以使用最近的。如果你觉得父母过分杀人。

DEMO FIDDEL

Answer 3

您可以使用jquery选择器http://api.jquery.com/category/selectors/来查找适当的元素。例如：

$（“＃element”）将获得id =“element”的元素（例如：）

在您的情况下，您可以使用

$(".btn-edit").click(function(){
// action
});

javascript中id / class属性的策略

3 个答案:

编辑：