JSF + jQuery：如何实现StackOverFlow可折叠评论框

Question

我正在创建一个 Comment-Reply 系统，类似于stackoverflow，我想知道如何使用JSF + jQuery来实现它。我有一个数据表，每行都有一个链接和一个文本框，并且 单击链接后，只会出现同一行上的文本框，并将焦点放在该文本框上。

<h:form id="userComment">
    <p:dataTable value="bean.comments">
         <p:column>
              <!-- link that if u click on it, the textbox below appear -->
              <h:inputTextarea id="reply" />      
         </p:column>
    </p:dataTable>
</h:form>

我的主要障碍是，普通 jQuery 用户会这样做：假设链接 id 是 富 然后

$('#foo').click(function(){
    //Make the box with id `reply` appear and put focus on it
});

但由于每一行都有一个文本框调用 reply,前面会有prependId reply 和 foo 像这样 userComment:1:foo 或者 userComment:1:reply. 。所以 $('#foo') 和 $('#reply') 行不通

Answer 1

使用 this 和 replace 聪明的方法。

例如。

<h:form>
    <p:dataTable value="#{bean.comments}" var="comment">
        <p:column>
            <h:outputText value="#{comment.text}" />
            <h:outputLink id="add" value="#" onclick="showReply(this)">Add reply</h:outputLink>
            <h:inputTextarea id="reply" value="#{comment.reply}" style="display:none;" />
        </p:column>
    </p:dataTable>
</h:form>

和

<script>
    function showReply(link) {
        jQuery(PrimeFaces.escapeClientId(link.id.replace(/add$/, 'reply'))).slideDown(function() {
            jQuery(this).focus();
        });
    }
</script>

这 string.replace(/add$/, 'reply') 将取代 foo:1:add 到 foo:1:reply 和 PrimeFaces 提供的函数 PrimeFaces.escapeClientId() 会将其转义为有效的 jQuery ID 选择器。最后就可以在回调中做焦点了。