我如何添加文本框时,点击评论链接为每个评论



我能够创建评论框喜欢和评论按钮使用下面的代码,但我想添加另一个文本框当用户点击评论链接。

如何添加另一个文本框当我点击下面的代码注释链接

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#cbox").keypress(function(e){
var key=e.which;
if(key==13)
{
 var i=0;
$("#cbox").each(function(){
var data=$(this).val();
$("#cdv").append('<div style="background-color:gray">'+data+'</div>'+'<div>'+'<a href="#" id="link'+i+'" style="text-decoration:none;font-family:calibari;font-size:15px">Like</a>'+'&nbsp'+'&nbsp'+'<a href="#" id="cmnt'+i+'" style="text-decoration:none">Comment</a>'+'</div>');
});
i++;
}
});
});
</script>
</head>
<body>
<input type="text" id="cbox" />
</br>
</br>
<div id="cdv" style="background-color:#FF00BF;height:auto;width:300px">
</body>
</html>

改变这一行:

$("#cdv").append('<div style="background-color:gray">'+data+'</div>'+'<div>'+'<a href="#" id="link'+i+'" style="text-decoration:none;font-family:calibari;font-size:15px">Like</a>'+'&nbsp'+'&nbsp'+'<a href="#" id="cmnt'+i+'" style="text-decoration:none">Comment</a>'+'</div>');

 $("#cdv").append('<div style="background-color:gray">'+data+'</div>'+'<div>'+'<a href="#" id="link'+i+'" style="text-decoration:none;font-family:calibari;font-size:15px">Like</a>'+'&nbsp'+'&nbsp'+'<a href="#" id="cmnt'+i+'" style="text-decoration:none" class='comment-link'>Comment</a>'+'</div>');

注意我在你的链接后面加了class='comment-link'。

不,我们可以给每个链接附加一个onlick句柄,像这样:

<script>
$(function(){
     $("body").on(".comment-link","click", function(){
           $(this).append("<input type='text' class='added-input'/>")
      });
});
<script>

最新更新