Question

我是jQuery和JS的新手。我正在尝试建立类似Twitter的东西，当然，这是一个更简单的版本。 Here's the JSFiddle:基本上我希望每条不同的推文都有自己的评论框。（注意：评论不会有重新评论选项;所有评论都将连续发布在根推文下）现在发生的是，对于所有（不同的）推文，评论框出现在最后一条推文的末尾。我将如何实现我的目标？

使用Javascript：

$(document).ready(function () {
$("#btn1").click(function () {
    $("p").append(" <b>Appended text</b>.");
});

$(".commentbutton").click(function v() {
    var text = $("#txt1").val();

    $("body").append('<br><div class="x"><label class="gp">' + text + '</label><button id="b1"</button>Comment</div>');
    $("body").find(".x:last").hide().slideDown("slow");

});

$(document).on('click', '.x>button', function () {
    $('body').find('.x:last').append('<input id="txt1" type="text">');
    });
});

HTML：

<div style="position:absolute;left:230px;top:30px;border:solid;display:inline-block">
<p>Type a tweet</p>
<input id="txt1" type="text">
<br>
<button id="btn2" class="commentbutton">Tweet</button>
</div>

CSS：

.gp {
border-style:solid;
max-width:30%;
padding:2px;
display:block;
}
.x {
width:200px;
background-color:#93bbd4;
border-style:solid;
}
#txt1 {
width:200px;
height:28px;
}

Answer 1

请参阅：Sample

$(document).on('click', '.x>button', function () {
    var id = "twt" + $(this).parent().index() +  "txt" + ($(this).parent().find('input').length+1);
    $(this).parent().append('<input id="' + id+ '" type="text">');
});

我已修复了textbox appendind的问题。除此之外，我还修复了你所遇到的多重身份问题..

Answer 2

将append()更改为prepend()。如果我理解你的问题，那就是你所需要的一切。

每个推文的个人评论框切换（如Twitter）？

2 个答案: