Question

我可以使用下面的代码创建LIKE和COMMENT按钮的注释框，但是当用户点击COMMENT链接时我想添加另一个TEXTBOX。

当我点击以下代码中的COMMENT链接

时，如何添加其他文本框

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

Answer 1

更改此行：

$("#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 handlder：

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

如何在每个评论的评论链接上添加文本框

1 个答案: