jsp 想用JSP模仿一个QQ空间好友图片里的点击回复 功能

Question

QQ空间好友动态里好友图片点击回复那个按钮出现文本框,当你失去文本框焦点的时候 文本框消失, 还有就是每张图片都会有人评价，但是那个textarea文本框的id怎么取，这个是不能重复的，请大师指点迷津,给个代码

Answer 1

文本框消失：可不可以用jquery的dom操作，点回复就.show()，失去焦点就.hide()；
第二个问题没看懂，文本框一个id不够用吗？

Answer 2

我想做的跟qq空间里评论照片一样，每个照片都可以评论，但是现在那个文本框我只能评论第一张图片，后面的图片都不能评论，那位大神能看下我的代码哪里有问题？<div id="chatsDiv">
<div class="share">
<s:if test="chatsList != null && !chatsList.isEmpty()">
   <table border="1" bordercolor="#66CCFF" cellpadding="0" cellspacing="0">
     <s:iterator value="chatsList" var="chat">    
     <tr>
     <th>发送人：</th>
     <td class="sname"><s:property value="#chat.userName" /></td>
     </tr>
     <tr>
     <th>发送内容：</th>
     <td><s:property value="#chat.commentContent"/>
     </tr>
     <tr>
     <th>发送时间：</th>     
     <td><s:property value="#chat.commentDate"/></td>     
     </tr>
     </s:iterator>
     </table>
</s:if>

    
     <hr color="#66CCFF"/> 
    评价内容：  
     <textarea name="commentContent" id="commentContent" rows="3" cols="100" ></textarea>
     <span id="chatTip"></span>
     <input type="button" id="btn" value="发送" onclick="chat(<s:property value="#share.pictureId"/>)"/>
     <span id="chatTip"></span>
     <input type="hidden" id="pictureId" value='<s:property value="#share.pictureId"/>'/>
     <input type="hidden" id="friendNickname" value='<s:property value="friendNickname" escape="false"/>'/>
    
     </div>
     </div>
function chat(pictureId){
             
     var commentContent = $("#commentContent").val();
     var friendId = $("#friendId").val();
     var isPass = true; 
    
     if(commentContent ==""){ 
window.alert("请输入评价内容"); 
     $("#commentContent").focus();
     isPass = false; 
     }else{     $.ajax({
type: "post",
url: "<%=path%>/commonJson/Picturechat.action",
data: {"commentContent":encodeURI(encodeURI(commentContent)),"pictureId":pictureId},
dataType:"json",
beforeSend: function(XMLHttpRequest){
 $.blockUI({message: "正在处理,请稍后..."});  
 alert("-----"+commentContent+pictureId);
},

success: function(data, textStatus){
if(data.ajaxReqResult != 1){
alert("1");
if(data.result >= 1){//成功
//加载chats
refreshChats(<s:property value="#share.pictureId"/>);
alert("2");

}
$("#chatTip").text(data.ajaxRspMsg);
closePopWin();
}else{
alert("3");
$.blockUI({message: "对不起，系统繁忙，请稍后重试！"});
setTimeout('closePopWin',2000);
}
},
complete: function(XMLHttpRequest, textStatus){

},
error: function(){//请求出错处理
$.blockUI({message: "对不起，系统繁忙，请稍后重试！"});
setTimeout('closePopWin',2000);
}
}); 
}
     }
    
     function refreshChats(pictureId){
     var friendId = $("#friendId").val();
     $.ajax({
type: "post",
url: "<%=path%>/PictureCommentService.action",
data: {"friendNickname":encodeURI(encodeURI($("#friendNickname").val())),"pictureId":11510},
dataType:"html",
beforeSend: function(XMLHttpRequest){
 $.blockUI({message: "正在处理,请稍后..."});  
 alert("4"+friendNickname);
},
success: function(data, textStatus){
 $("#chatsDiv").html(data);
 alert("5");
},
complete: function(XMLHttpRequest, textStatus){

},
error: function(){//请求出错处理
alert("6");
$.blockUI({message: "对不起，获取评价内容失败，请稍后重试！"});
setTimeout('closePopWin',2000);
}
}); 
     }