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を介してこれらの要素に対していくつかのアクションを実行したいと思います。この要素に対していくつかのAjaxリクエストを実行できるように、要素のデータベースIDが必要です。上記の解決策は機能しますが、いくつかの欠陥があります-それはHTML構造に依存しています（たとえば、ボタンを他の要素でラップすると、HTML構造が変更されたため、parent（）は機能しません）。

要素のデータベースIDをHTMLに保存して、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>

キーは、DOMツリーを上に移動してコメントエントリを表す「.comment」divを見つける.closest（）jQuery関数です。つまり、.edit要素と.delete要素を.comment DIV内に保持している限り、JavaScriptを気にすることなく、また複数のdata-*属性を追加することなくHTML構造を自由に変更できます。場所。

于 2013-03-27T15:04:04.483 に答える
-2

データ属性を使用できます。データエンティティのIDをhtmlid属性で表す代わりに。これらはフォームデータの属性です-*。コードは次のようになります。

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

さらに、ボタン要素にデータ属性を設定すると、IDを取得するためにparent（）までトラバースする必要がなくなります。

さらに深く知りたい場合は、Angular.js、Ember.js、Backbone.jsなどのjsフレームワークを確認してください。DOMはデータの保存には使用せず、データを表示するだけにするという考え方です。その後、Javascriptモデルを使用してアプリケーションデータを保存できます。

于 2013-01-24T17:43:11.580 に答える