1

有给定的代码：

<div id="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div id="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<script>
   $(".edit").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, edit element in database with given id*/});
   $(".delete").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, delete element in database with given id*/});
</script>

有一个包含一些元素的数据库，这些元素有 ID，我想通过 Ajax 对这些元素执行一些操作。我需要元素的数据库 ID，以便我可以对这个元素执行一些 Ajax 请求。上面的解决方案有效，但是有一些缺陷 - 它依赖于 HTML 结构（例如，当我用其他元素包装按钮时， parent() 将不起作用，因为 HTML 结构发生了变化）。

如何以更好的方式在 HTML 中存储元素的数据库 ID，以便 JavaScript 可以获取它，例如用于 Ajax 请求？

4

3 回答 3

2

为什么不使用以下方法做这样的事情data()：

<div>
   <p>SOMELEMENT</p>
   <button class="edit" data-id="256">EDIT</button>
   <button class="delete" data-id="256">DELETE</button>
</div>
<div>
   <p>SOMELEMENT2</p>
   <button class="edit" data-id="257">EDIT</button>
   <button class="delete" data-id="257">DELETE</button>
</div>

现在您已data-id与按钮关联，您可以执行以下操作：

$(".edit").click(function() { 
  var id = $(this).data("id"); 
  /* do some Ajax here, edit element in database with given id*/
});

例子

于 2013-01-24T17:38:45.127 回答
2

尽管您已经有一个（完全有效的）可接受的答案，但我想提供另一种解决您的问题的方法，它消除了必须将数据附加到每个按钮的负担，而不是依赖于一个可用于获取句柄的类数据附加到的实际项目/记录/条目，因为无论如何我的 HTML 倾向于有这样的类，我发现这非常方便（我将使用注释列表作为示例）：

<div class="comment" data-id="256">
    <p>SOMELEMENT</p>
    <button class="edit">EDIT</button>
    <button class="delete">DELETE</button>
</div>
<div class="comment" data-id="257">
    <p>SOMELEMENT2</p>
    <button class="edit">EDIT</button>
    <button class="delete">DELETE</button>
</div>

<script>
    $(".comment .edit"  ).click(function() { var id = $(this).closest('.comment').data('id'); });
    $(".comment .delete").click(function() { var id = $(this).closest('.comment').data('id'); });
</script>

关键是 .closest() jQuery 函数，它沿着 DOM 树向上移动以找到代表评论条目的 '.comment' div。这意味着只要将 .edit 和 .delete 元素保留在 .comment DIV 中，就可以自由修改 HTML 结构，而不必担心 JavaScript，也不必在多个文件中添加 data-* 属性地方。

于 2013-03-27T15:04:04.483 回答
-2

您可以使用数据属性。而不是让数据实体的 id 由 html id 属性表示。这些是表单 data-* 的属性。您的代码可能如下所示：

<div data-elementid="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div data-elementid="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>


    <script>
        $(".edit").click(function() { var id = $(this).parent().data('elementid'); });
        $(".delete").click(function() { var id = $(this).parent().data('elementid'); });
    </script>

John Resig 在这里写到： http: //ejohn.org/blog/html-5-data-attributes/

此外，您可以在按钮元素上设置 data 属性，然后您不必遍历 parent() 来获取 id。

如果您想更深入，请查看 Angular.js、Ember.js 或 Backbone.js 等 js 框架。这个想法是 DOM 不应该用于存储数据，只用于呈现它。然后可以使用 Javascript 模型来存储您的应用程序数据。

于 2013-01-24T17:43:11.580 回答