我在支持bean中有一个消息列表，我在ui：repeat标签中使用它来显示在xhtml页面上。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" >
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Styles/homepage-style.css" />
<link rel="stylesheet" type="text/css" href="../Styles/profile.css" />
<title>Shadi Bandhan | We find the best match for you</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#openMessage").hide();
});
function openMessage(id){
//$("div#openMessage").slideDown(4000);
alert(id);
}
</script>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="main-content">
<p:growl autoUpdate="true" />
<div id="left-pane">
<div id="profile-info-area">
<div id="profile-info">
<span>
<img class="profileImg" src="../images/profileImg.jpg" width="185" height="200" />
</span>
<img class="request-btn" src="../images/request_photo_btn.jpg" height="35" width="156"/>
<a href="sentMessages.xhtml">Sent box</a> <br />
<a href="#">Drafts</a> <br />
<a href="#">My Packages</a> <br />
<a href="#">Other Settings</a> <br />
<a href="#">FAQs</a>
</div>
</div>
<div id="home-main-area">
<div id="messages-wrapper">
<div id="messages-header">
<div id="m-heading">
Messages - Inbox
</div>
<div id="m-search">
<div id="searchbox">
Search Messages <input type="text" value="Search" />
</div>
<!-- <div id="newmessage">
<a href="#"> + New Message </a>
</div>-->
</div>
</div>
<h:form id="messagesForm">
<div id="messages">
<p:dialog id="messagesDialog" modal="true" widgetVar="messageDialog" resizable="false" width="750" height="200" header="New Message" >
<h:panelGrid columns="2" id="dialogGrid">
<p:column>
<h:outputLabel for="msgRecepient" value="To"/>
</p:column>
<p:column>
<h:outputLabel id="msgRecepient" value="#{userMsg.userFullname}" >
</h:outputLabel>
</p:column>
<p:column>
<h:outputLabel for="msgContents" value="Message"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="300" id="msgContents" value="#{messagesManagedBean.msg.message}" cols="65" rows="3" >
<p:watermark for="msgContents" value="#{userMsg.userId}" />
</p:inputTextarea>
</p:column>
<p:column>
<p:commandButton id="msgSend" value="Send" action="#{messagesManagedBean.sendMessage('reply')}" oncomplete="messageDialog.hide()" >
<f:param value="#{userMsg.userId}" name="messageSenderId" />
</p:commandButton>
</p:column>
</h:panelGrid>
</p:dialog>
<ui:repeat var="userMsg" value="#{messagesManagedBean.paginator1.model}">
<center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
<div class="message">
<div id="senderImg">
<img class="senderImg" src="../images/profile-pic.jpg" width="50" height="50" />
</div>
<div id="message-txt-area">
<div id="senderName">
<p:commandLink styleClass="senderName" value="#{userMsg.userFullname}" action="#{myProfileManagedBean.loadProfileFrontInformation(userMsg.userId)}"></p:commandLink>
</div>
<div class="message-txt">
#{userMsg.message}
</div>
<div id="msgAction">
<!-- <a href="#" onclick="messageDialog.show()">Reply</a>-->
<p:commandLink styleClass="reply-btn" value="Reply" oncomplete="messageDialog.show()" update=":messagesForm:dialogGrid">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
<p:commandLink styleClass="open-btn" value="Open" onclick="openMessage(#{userMsg.userId})">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</div>
<div id="openMessage">
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
</div>
</div>
</div>
</ui:repeat>
<center>
<h:commandButton value="< prev" action="#{messagesManagedBean.paginator1.prev}"/>
<h:outputText value="#{messagesManagedBean.paginator1.pageIndex} / #{messagesManagedBean.paginator1.pages}"/>
<h:commandButton value="next >" action="#{messagesManagedBean.paginator1.next}"/>
<h:inputHidden value="#{messagesManagedBean.paginator1.pageIndex}"/>
</center>
</div>
</h:form>
</div>
</div>
</div>
<div id="right-pane">
<div id="right-vline">
<img class="v-differenciator" src="../images/differentiator.jpg" />
</div>
<div id="right-suggestions-top">
<center>
<p>Profiles you may like</p>
</center>
<div id="right-suggestions-top-wrapper">
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
</div>
<center>
<a href="">View More..</a>
</center>
</div>
<div id="right-suggestions-bottom">
<center>
<p>People Who might be Interested in you</p>
</center>
<div id="right-suggestions-top-wrapper">
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
</div>
<center>
<a href="">View More..</a>
</center>
</div>
<div id="fb-twitter-icons" >
<img class="fb-icon" src="../images/fb-icon.jpg" />
<img class="twitter-icon" src="../images/twitter-icon.jpg" />
</div>
<div id="fb-twitter-labels">
<h:outputLabel style="color: #680B0C;font-weight: bold;" value="Share & likes"/>
</div>
<div id="text-info-profile" >
<b>Want to know why you are still single?</b>
<p>
We understand it is not easy to find a suitable match,ShadiBandhan.com provides safe plateform to find your ideal match.
</p>
<a href="#">[Read More..]</a>
</div>
</div>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
现在， 我想要那个
我正在使用primefaces，如果在primefaces中有一个控件，我可以使用它来实现这一切，请告诉我。我想创建动态div id但不知道如何让它工作，这就是为什么在这里发帖......
任何建议都表示赞赏。
答案 0 :(得分：1)
为这些元素指定一个类名。整个文档中的元素ID必须是唯一，并且JSF生成的ID在jQuery中是笨拙的。可以在多个元素上使用类名，并且在jQuery中更容易选择。
像这样的东西
<ui:repeat value="#{bean.messages}" var="message">
<div class="message">
<div class="short">
<p>#{message.short}<a href="#" class="more">more</a></p>
</div>
<div class="full">
<p>#{message.full}</p>
<h:commandButton value="Reply" action="#{bean.reply(message)}" />
</div>
</div>
</ui:repeat>
使用此CSS
.message .full {
display: none;
}
和这个JS
$(".message .short .more").click(function() {
var $message = $(this).closest(".message");
$(".short", $message).hide();
$(".full", $message).slideDown();
});