jquery - 如何组织用户的分享以轻松地向该特定帖子添加评论？

Question

在一个项目中，我有一个用户流，每个人都可以分享和评论分享。我会在每个共享中即时添加评论。整体结构如下：

我最近听说使用数字作为 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 已被单击？（我们需要为该特定共享添加该评论）

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

Answer 2

如果我理解你是正确的，你不需要身份证来做到这一点。

示例 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>

这将在单击的评论链接之后添加一个textarea和两个buttons（并关注textarea）。

品味风格:)

这是给你的小提琴。（更新）