0

私がユーザー向けのストリームを持っているプロジェクトでは、誰もが共有したり、共有にコメントしたりできます。各共有にその場でコメントを追加します。全体の構成は以下のとおりです。
ここに画像の説明を入力

最近、ID に数値を使用することは、CSS でサポートされていないため、まったくお勧めできないと聞きました。クラスに変更すると、新しい問題が発生します。どの投稿がクリックされたかを認識できません (ID が番号でない場合、その特定の共有 ID を取得できません)。

私がjQueryに持っているコードは以下のようなものです: 

$("div.comment").click(function(){ // Add comment link
            var jusid = $(this).attr('id');
            var content = "<textarea name='txtcomment' class='txtcomment' cols='67' rows='7'></textarea><button name='btncomment' class='btncomment'>Submit</button><div class='closecomment'>Close</div>";
            $("div#after"+jusid).html(content);
            $("div#after"+jusid).find('.txtcomment').focus();
        });

それは実際に絡み合っており、近い将来めちゃくちゃになると確信しています。これを行う最善の方法は何ですか？IDの番号を持たず、さらにどのID番号のどのdivがクリックされたかを認識する方法は? (その特定の共有にそのコメントを追加する必要があります)

4

2 に答える 2

1

投稿内の 1 つの非表示フィールドに投稿の ID を配置できます。このようにして、投稿をクリックしたときに投稿のIDを取得できます。

[編集]

次のような html 構造があるとします。

<div class='comment'>
  <input type='hidden' class='post_id' value='1'/>
</div>
<div class='comment'>
  <input type='hidden' class='post_id' value='2'/>
</div>
<div class='comment'>
  <input type='hidden' class='post_id' value='3'/>
</div>

jQuery を次のようにすることができます。

$("div.comment").click(function(){
          var clicked_post_id = $(this).find('input.post_id').val();

          // Perform other operations with the above retrieved clicked_post_id

});

http://jsfiddle.net/7wCJK/2/のデモ

于 2012-06-29T06:47:39.767 に答える
1

あなたが正しいことを理解していれば、それを行うためにIDは必要ありません。

サンプル HTML:

<div>
    <h3>#1333</h3>
    <p>Lorem ipsum</p>
    <a class="comment" data-postid="1333">Add a comment</a>
</div>​

サンプル Java スクリプト:

$("a.comment").click(function() {
    var $this = $(this),
        isOpen = !$this.next().length,
        $textarea;

    if (!isOpen) {
        $this.next().focus();
        return;
    }

    $textarea = $("<textarea/>");

    $this.after(
        $textarea
            .after(
                $("<button/>")
                    .text("Submit")
                    .click(
                        {$textarea: $textarea, postId: $this.attr("data-postid")},
                        submitComment
                    )
            )
            .after(
                $("<button/>")
                    .text("Close")
                    .click(/* maybe do something here? */)
            )
    );

    $textarea.focus();
});

submitComment = function (event) {
    var message = event.data.$textarea.val(),
        postId = parseInt(event.data.postId, 10);

    alert("Do something with these:\nComment: " + message + "\nPost Id: " + postId);
};

</p>

これにより、クリックされたコメント リンクの後にatextareaと 2 つが追加されます (そして にフォーカスします)。buttonstextarea

味わうスタイル:)

ここにフィドルがあります。（更新しました）

于 2012-06-29T09:10:18.043 に答える