javascript - 无法使 JavaScript Accordion 与 SQL Server 表一起正常工作

Question

我正在使用 ASP Repeater 显示 SQL Server 表中的内容。

我一直在尝试结合this模板和this教程。

输出按预期呈现如下:

但是，当我点击任何日期时，只有第一个项目在展开。下面是我的 aspx 代码和 JavaScript 脚本。

<asp:Repeater ID="rptAccordian" runat="server">
                            <ItemTemplate>
                                <div class="panel-group" id="accordion">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">
                                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="collapseOne">
                                                    <%# Eval("News_Date") %>
                                                </a>
                                            </h3>
                                        </div>
                                        <div id="collapseOne" class="panel-collapse collapse">
                                            <div class="panel-body">
                                                <%# Eval("News_Content") %>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>

       <!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

下面是我正在尝试修改的工作示例:

<div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Item One Heading</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            Item One Content
                        </div>
                    </div>
                </div>
                <!-- /.panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Item Two Heading</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            Item Two Content
                        </div>
                    </div>
                </div>
                <!-- /.panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Item Three Content</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                           Item Three Content
                        </div>
                    </div>
                </div>

正如您在上面看到的，链接的 href 和 div 的 ID 都增加了 1，因为添加了 div。

由于 href="collapseOne"，我的代码只影响第一个项目。

我想我需要找到一种方法来根据我将在转发器中显示的项目数量进行递增，但我不确定如何进行

我检查了元素，这是我发现的:

下面是修改后的 HTML 输出:

Answer 1

为 C# Asp.Net 试试这个

您的页面

    <div class="panel-group" id="accordion">
        <asp:Repeater ID="rptAccordian" runat="server">
        <ItemTemplate>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse<%= getIndex() %>">
                            <%# Eval("News_Date") %>
                        </a>
                    </h3>
                </div>
                <!-- Get the current index-->
                <div id="collapse<%=getIndex()%>" class="panel-collapse collapse">
                    <div class="panel-body">
                        <%# Eval("News_Content") %>
                    </div>
                </div>
            </div>
            <!--then increment it for the next repeater element-->
            <% incrementIndex(); %>
        </ItemTemplate>
    </asp:Repeater>
    </div>
       <!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

代码隐藏

int index;
protected void Page_Load(object sender, EventArgs e)
{

    index = 1;
}

protected int getIndex()
{
    return index;
}
protected void incrementIndex()
{
    index++;
}

编辑

我对脚本 block 的看法是错误的。我应该用 <%= %>当我想返回一个值给页面和<% %>简单地运行代码。