Javascript 当单击取消按钮时，我想将textarea恢复到第一步（Jquery）

源代码=>

我有多行评论。我在另一行显示每个评论。当我点击编辑按钮时，我在div中添加了一个

textarea

，并将这个textarea值设置为div值之后，我将“编辑”按钮更改为“取消”按钮。

如果用户正在这个文本区域上写东西，点击“取消”按钮，我想把这个文本区域恢复到第一步。但每一行的值都是相同的

我将源代码添加到JSFIDLE。你可以在这个链接上看到我的错误

comment 99(this is id number)
<div class="dialogbox">
    <div class="body">
        <span class="tip tip-left"></span>
        <div class="message">
            <span id="99">
                <b><a href="/profil/index/1">User Name</a></b>
                <div class="comment">hello world first clck on this. after click on o other edit button. </div>
                <a style="float:right; font-size: 9px;" onclick="return false;" href="" title="">1 day ago</a><br>
                <a href="/posta/index/1">See the post</a> | <a class="edit" id="edit" onclick="return false;">Edit</a> | 
                <a href="/comment/deletecomment/99">Delete</a>
            </span>
        </div>
    </div>
</div>
<br><br>

comment 12 (this is id number)
<div class="dialogbox">
    <div class="body">
        <span class="tip tip-left"></span>
        <div class="message">
            <span id="12">
                <b><a href="/profil/index/1">User Name</a></b>
                <div class="comment">hello world</div>
                <a style="float:right; font-size: 9px;" onclick="return false;" href="" title="">1 day ago</a><br>
                <a href="/posta/index/1">See the post</a> | <a class="edit" id="edit" onclick="return false;">Edit</a> | 
                <a href="/comment/deletecomment/12">Delete</a>
            </span>
        </div>
    </div>
</div>


$(document).on("click", ".edit", function(event) {
    var obje = $(event.target).parent();
    var commentID = obje.attr("id");
    var prev = $(event.target).prev().prev().prev().prev(); 
    comment = prev.html();
    prev.html("<div><textarea class='commentval' style='width: 458px;'>"+comment+"</textarea><button class='save'>save</button></div>");
    $(event.target).removeAttr("class","edit");
    $(event.target).attr("class", "cancel");
    $(event.target).html("Cancel");
});


$(document).on("click", ".cancel", function(event) {
    $(event.target).removeAttr("class","cancel");
    $(event.target).attr("class", "edit");
    $(event.target).html("Edit");
    var prev = $(event.target).prev().prev().prev().prev();
    prev.html(comment);
});

注释99（这是id号）
你好，世界第一次听到这个。点击其他编辑按钮后。


| 



注释12（这是id号）
你好，世界


| 
$（文档）。在（“单击”，“编辑”，函数（事件）{
var obje=$（event.target）.parent（）；
var commentID=obje.attr（“id”）；
var prev=$（event.target.prev（）.prev（）.prev（）.prev（）.prev（）；
comment=prev.html（）；
html（“+注释+保存”）；
$（event.target）.removeAttr（“类”，“编辑”）；
$（event.target）.attr（“类”、“取消”）；
$（event.target）.html（“取消”）；
});
$（文档）。在“单击”、“取消”上，函数（事件）{
$（event.target）.removeAttr（“类”，“取消”）；
$（event.target）.attr（“类”，“编辑”）；
$（event.target）.html（“编辑”）；
var prev=$（event.target.prev（）.prev（）.prev（）.prev（）.prev（）；
html（评论）；
});

$（'.message'）。每个（函数（）{
var_this=这个；
var edit=$（_this）.find（'#edit'）；
var comment=$（_this）.find（'.comment'）；
var文本；
编辑。单击（函数（）{
if（$（this）.hasClass（'edit'））{
text=comment.html（）；
html（“+text+”save”）；
$（this）.addClass（'cancel'）.removeClass（'edit'）；
$（this.text（'Cancel'）；
}否则{
$（this.text（'Edit'）；
$（this）.addClass（'edit'）.removeClass（'cancel'）；
html（文本）；
}
});
});

$('.message').each(function(){
            var _this = this;
            var edit = $(_this).find('#edit');
            var comment = $(_this).find('.comment');
            var text;

            edit.click(function(){
                if($(this).hasClass('edit')) {
                    text = comment.html();
                    comment.html("<div><textarea class='commentval' style='width: 458px;'>"+text+"</textarea><button class='save'>save</button></div>");
                    $(this).addClass('cancel').removeClass('edit');
                    $(this).text('Cancel');
                } else {
                    $(this).text('Edit');
                    $(this).addClass('edit').removeClass('cancel');
                    comment.html(text);
                }

            });
        });