单击将文本从div添加到textarea

Question

我想允许用户编辑他们的帖子，为此，我希望他们能够单击链接，一旦按下div，他们的帖子原先将隐藏，并且新的div和旧文本一起可见div在textarea内-因此他们可以轻松地从字面上编辑其旧帖子。

我尝试搜索过去一个小时，但找不到任何可靠的答案。

我拥有的HTML：

<div class="post-content">
    <div class="post-inner-content">
        <p>Users comment will go here</p>
    </div><!-- .post-inner-content -->
    <a href="#" class="edit-post">Edit Post</a>
    <div class="edit-post-area">
        <textarea></textarea>
    </div><!-- .edit-post-area -->
</div><!-- .post-content -->

Answer 1

应该很简单：

$("a.edit-post").click(function() {
    //Get the text
    var text = $(this).prev("div.post-inner-content").text();

    //Create a text area selector (container, rather)
    var textarea = $(this).next("div.edit-post-area");

    //Give the textarea a value
    $("textarea", textarea).val(text);

    //Show it (if hidden)
    //textarea.show();
});

小提琴： http ： //jsfiddle.net/tudcP/

Answer 2

或者，您可以使用以下方法：

js

$(".edit-post").on("click", 
               function(){                      
                   var edit = $(this)
                   .prev()
                   .find("p")
                   .html();//find comment to edit

                    $(this)
                    .next()
                    .find("textarea")
                    .val(edit);//find textarea and insert comments to edit                                        
               });

小提琴

Answer 3

使用ID代替类，然后以这种方式选择它们：

<div class="post-content">
    <div id="post-inner-content">
        <p>Users comment will go here</p>
    </div><!-- .post-inner-content -->
    <a href="#" id="edit-post">Edit Post</a>
    <div id="edit-post-area">
        <textarea></textarea>
    </div><!-- .edit-post-area -->
</div>

JavaScript：

$("#edit-post").click(function() {
    //Get the text
    var text = $("#post-inner-content").text()

    //Create a text area selector (container, rather)
    var textarea = $("#edit-post-area");

    //Give the textarea a value
    $("textarea", textarea).val(text);

    //Show it
    textarea.show();
});

小提琴