jquery - 使用 JQuery 在带有 Repeater 控件的 ASP .NET 页面中进行展开/折叠

Question

我的 ASP .NET 页面包含一个中继器控件。这是感兴趣的 HTML。请注意，我们这里有一些自定义控件，但我认为这对我的问题并不重要。

<table style="border: 0px;" cellpadding="0" cellspacing="0">
   <tr>
      <td style="width: 150px;">
     <b>Topic</b>
      </td>
      <td style="width: 250px; padding-right:10px;">
     <b>Score</b>
      </td>
   </tr>
   <asp:Repeater ID="_prvCtlRepeaterSurveyTopics" runat="server">
      <ItemTemplate>
    <tr>
      <td style="width: 35%;">
         <div id="ClickToExplandDiv">
        <img id="_prvCtlImagePlusMinus" runat="server" alt="Expand/Collapse" src="" class="PlusMinus" />
        <customtagprefix:ctlEncodedLabel id="_prvCtlEncodedLabelTopicText" runat="server" CssClass="ECLink" />
        </div>
      </td>
      <td style="width: 30%;">
         <img id="_prvCtlImageTopic" runat="server" src="" alt="Score" />
      </td>
      <td style="width: 35%; white-space: nowrap;">
         <customtagprefix:ctlEncodedLabel id="_prvCtlLabelTopic" runat="server" />
      </td>
    </tr>
    <tr>
      <td style="padding: 3px 15px; width: 400px;" colspan="3">
        <div id="ExplandODiv">
        <customtagprefix:ctlRoundedGrayHeader id="_prvCtlRoundedGrayHeaderCF" runat="server" />
        <customtagprefix:ctlSummeryResultsList ID="_prvCtlSummaryResultsList" runat="server" />
        <customtagprefix:ctlRoundedGrayFooter id="_prvCtlRoundedGrayFooterCF" runat="server"/>
        </div>
      </td>
    </tr>                           
      </ItemTemplate>
   </asp:Repeater>
</table>

我希望能够单击由此代码创建的 DIV:

<div id="ClickToExplandDiv">
   <img id="_prvCtlImagePlusMinus" runat="server" alt="Expand/Collapse" src="" class="PlusMinus" />
   <customtagprefix:ctlEncodedLabel id="_prvCtlEncodedLabelTopicText" runat="server" CssClass="ECLink" />
</div>

并让该段中显示的信息展开或折叠:

  <td style="padding: 3px 15px; width: 400px;" colspan="3">
    <div id="ExplandODiv">
    <ayco:ctlRoundedGrayHeader id="_prvCtlRoundedGrayHeaderCF" runat="server" />
    <ayco:ctlSummeryResultsList ID="_prvCtlSummaryResultsList" runat="server" />
    <ayco:ctlRoundedGrayFooter id="_prvCtlRoundedGrayFooterCF" runat="server"/>
    </div>
  </td>

我对 JQuery 感到不知所措。现在，我有以下内容，它成功隐藏了我最初想要隐藏的所有 DIV，然后仅打开第一个隐藏的 DIV，无论我单击哪个展开链接 DIV。

<script type="text/javascript">
    var isInitialized = false;
    $(document).ready(function() {

        if (!isInitialized) {
            $('[id=ExplandODiv]').hide();
            isInitialized = true;
        }

        $('div[id=ClickToExplandDiv]').click(function() {
            $('#ExplandODiv:first-child').toggle();
        });
    });   
</script>

我认为解决此问题的一种方法是，当我在 ItemDatabound(...) 事件中运行元素时，为这些元素分配一个“虚假类”。但是，我认为我应该能够使用某种 CSS 选择器来选择我单击的链接下的适当 DIV。也许是“this”对象的某种派生体，但我很难弄清楚这一点。

如果您能就此提供任何帮助，我将不胜感激。谢谢。

Answer 1

您在表格中多次使用 id='ExplandODiv' 和 id='ClickToExplandDiv'。您应该将它们更改为类。

$(function(){
    $(".ExplandODiv").hide();    
    $(".ClickToExplandDiv").click(function(){
        $(this).closest("tr").find(".ExplandODiv").toggle();
    });
});

此外，您的 if (!isInitialized) 检查是不必要的。如果这解决了您遇到的某些问题，您可能在其他地方做错了什么。