0

假设您有一个帖子列表，并且每个帖子都有一个 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相当陌生，感觉很尴尬。
是否有更好的方案（或策略）来提供标识符以供使用？

4

3 回答 3

2

我只想把它data-post-id放在帖子的顶层div（带有 class 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 管理的元素外存储管理与元素关联的数据，并从属性初始化该数据。data-*如果您对属性的唯一用途data-*是读取它，那就.data大材小用了。大部分是无害的，但过度杀伤力。

于 2013-11-05T10:16:29.347 回答
1

一个更简单的方法是这样的

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

编辑 ：

正如TJ Crowder所说，您可以使用最接近的 . 如果你觉得父母是一个过分的杀戮。

DEMO FIDDEL

于 2013-11-05T10:24:00.017 回答
-1

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

$("#element") 将为您提供 id="element" 的元素（例如：）

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

$(".btn-edit").click(function(){
// action
});
于 2013-11-05T10:15:13.093 回答