0

div にデータが含まれる Rich Faces テーブルがあります。リッチテーブル行の特定の行にマウスオーバーすると別のdivを表示して、そのレコードに関連付けられた余分なデータを表示し、jqueryを使用してマウスアウトするとdivを非表示にします。jqueryを使用してdivを表示/非表示にすることができます。しかし問題は、特定の行のdivを表示/非表示にするのではなく、各行に関連付けられたすべてのdivタグを表示/非表示にしていることです。マウスオーバーした行のみに関連付けられた div タグのみが表示されるようにするにはどうすればよいですか?

コード スニペットは次のとおりです。

<s:div style="float:left; ">
  <rich:dataTable id="pendingOptyTbl" value="#{searchResultList}"
    var="item" style="border: none; float: left;width:100%;">  
      <rich:column style="border: none;">
          <s:div style="position:relative;height: 35px;">
            <s:div style="float:left; width: 700px; " >
               <a4j:outputPanel style="width: 700px;" onmouseout="jQuery('accountDetails').hide();"   onmouseover="jQuery('.accountDetails').show();">
                    <s:div>
                           <h:outputText value="#{searchController.getCapitalizeName(item.label)} : " >
                    </s:div>
               </a4j:outputPanel>
            </s:div>
        <s:div  style="float:left;top:-10px;right:80px; width:360px;position:absolute;" styleClass="searchDetailsClass">
                <a4j:outputPanel id="searchDetails" ajaxRendered="true" styleClass="accountDetails">

4

2 に答える 2

0

したがって、Vladimir からの回答と同様の方法でこれを解決しましたが、id の代わりに StyleClass を使用して解決しました。styleClass="detail-#{idx}" を追加し、onmouseover="jQuery('.detail-#{idx}').show();" を使用して検索しました。これにより、div のスタイル クラスを使用して要素が検索されます。行インデックスが関連付けられているため、すべての div には異なるスタイルクラスがあります。これが将来誰かに役立つことを願っています。参考までに: Vladimir の説明に従って Id を使用してもうまくいきませんでした。

于 2012-12-04T00:21:21.163 に答える
0

最善の解決策ではないかもしれませんが、行インデックスを使用して jQuery id セレクターを試すことができます。

<h:form id="form">
    <rich:dataTable id="table" rowKeyVar="idx" ...>
        <rich:column>
        ...
            <a4j:outputPanel onmouseover="jQuery('#form\\:table\\:#{idx}\\:searchDetails').show();"
                onmouseout="jQuery('#form\\:table\\:#{idx}\\:searchDetails').hide();">

<a4j:outputPanel id="searchDetails">結果の id はFirebugで確認できます。

于 2012-11-30T12:52:00.453 に答える