用 javascript 控制 Asp.Net 中继器答案

【问题标题】：Asp.Net repeater control with javascript用 javascript 控制 Asp.Net 中继器
【发布时间】：2012-12-28 08:33:47
【问题描述】：

我使用Repeater Control创建了FAQ页面，问题和答案是从代码后面绑定运行时如下。

ASPX 代码

<asp:Repeater ID="RepDetails" runat="server">
 <ItemTemplate>
 <table id="tblRepeater">
    <tr id="QARow" runat="server">
      <td>
       <div id="QuestionDiv" onclick="return show(this, 'AnswerDiv');">
        Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
       </div>
       <div id="AnswerDiv" style="display:none;">
        Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
       </div>
      </td>   
    </tr>
  </ItemTemplate>
  <FooterTemplate>
 </table>
  </FooterTemplate>
</asp:Repeater>

效果很好！问题是我使用以下脚本来打开和关闭答案。

<script type="text/javascript">
   function show(QuestionDiv, AnswerDiv) {
   var arrDIVs = QuestionDiv.parentNode.getElementsByTagName("Div");
   for (var i = 0; i < arrDIVs.length; i++) {
        var oCurDiv = arrDIVs[i];
        if (oCurDiv.id.indexOf(AnswerDiv) >= 0) {
            var blnHidden = (oCurDiv.style.display == "none");
            oCurDiv.style.display = (blnHidden) ? "block" : "none";
            }
         }
       return false;
     }
</script>

它的工作原理就像，当点击一个问题时，它会显示该问题的答案。

我的问题是：我想更新脚本，以便当我们单击一个特定问题时，它应该显示该问题的答案，也应该隐藏其他问题的答案。（如http://www.edubrainschool.com/faq.php）。

【问题讨论】：

var arrDIVs = QuestionDiv.parentNode.getElementsByTagName("Div");而是尝试： var arrDIVs = tblRepeater.parentNode.getElementsByTagName("table");
thanxs @Abhijeetchindhe，但这也不能解决我的问题。我之前已经试过了。
你试过调试吗？当您分配给 QuestionDiv 的 DIV 时，您会在 arrDIV 中获得什么值？？
仍然没有答案??????????? ://
@deostroll：没错！但是项目是动态生成的，所以我的范围很小！老实说，我对 Javascript 很不好！

标签： c# javascript asp.net c#-4.0 repeater

【解决方案1】：

最好的方法是绑定该 TR 的点击。您可以通过将 css 应用于 TR 来做到这一点。

    <asp:Repeater ID="RepDetails" runat="server">
 <ItemTemplate>
 <table id="tblRepeater">
    <tr id="QARow" runat="server" class="TROpenCSS">
      <td>
       <div id="QuestionDiv" class="QuestionCSS" onclick="return show(this, 'AnswerDiv');">
        Q:<asp:label id="lblQuestion" runat="server" Text='<%# Eval("Question")%>' CssClass="lblQueClass"></asp:label>
       </div>
       <div id="AnswerDiv" class="AnswerCss" style="display:none;">
        Ans:<asp:Label id="lblAnswerClass" runat="server" Text='<%# Eval("Answer")%>' CssClass="lblAnswerClass"></asp:Label>
       </div>
      </td>   
    </tr>
  </ItemTemplate>
  <FooterTemplate>
 </table>
  </FooterTemplate>
</asp:Repeater>

以及绑定那些CSS的点击事件

$('.TROpenCSS').bind('click',function(){
// Do your code to show the TD
});

为所有点击/鼠标悬停添加其他绑定

或者你可以使用“ddaccordion.js”或者参考下面的link

【讨论】：