0

投稿のリストがあり、各投稿に 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にかなり慣れていないので、これはぎこちなく感じます。
作業する識別子を与えるためのより良いスキーム (または戦略) はありますか?

4

3 に答える 3

2

data-post-id投稿のトップレベルdivに（ class を使用して）配置するだけpostです。次に、必要なときにいつでも、開始点がその中の要素の 1 つである場合はdiv、 を使用closestしてそれを見つけます。たとえば、thisがボタンの 1 つであるとします。それで：

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 に答える