将动态 ID 分配给 bootstrap 手风琴 asp-经典
assigning dynamic id to bootstrap accordion asp-classic
我正在尝试使用可折叠手风琴面板,并从数据库中填充它,但不知道如何更改每个面板的面板 ID。
这是相关代码(我认为 - 不是编码员)
<% i = 1 %>
<% WHILE NOT objRS.EOF %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading clearfix" id="headingOne" role="tab">
<div class="col-md-8 fz-2">
<h4 class="panel-title">
<%=objRS("data")%><br>
<a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">
<%=objRS("titolo")%>
</a>
</h4>
</div>
<div class="col-md-4 fz-2">
<% IF LEN(objRS("idchiave")) > 1 THEN %>
<img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
<% ELSE %>
(No Foto)
<% END IF %>
</div>
</div>
<div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
<div class="panel-body">
<div class="fz-gallery-wrap">
</div>
</div>
</div>
</div>
</div>
<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
您需要将手风琴移到 while...wend 循环之外,然后在单词 "One" 出现的任何地方添加变量 i
,以便每个面板都获得唯一标识符。
<% i = 1 %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<% WHILE NOT objRS.EOF %>
<div class="panel panel-default">
<div class="panel-heading clearfix" id="heading_<%=i %>" role="tab">
<div class="col-md-8 fz-2">
<h4 class="panel-title">
<%=objRS("data")%><br>
<a aria-controls="collapse_<%=i %>" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapse_<%=i %>" role="button">
<%=objRS("titolo")%>
</a>
</h4>
</div>
<div class="col-md-4 fz-2">
<% IF LEN(objRS("idchiave")) > 1 THEN %>
<img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
<% ELSE %>
(No Foto)
<% END IF %>
</div>
</div>
<div aria-labelledby="heading_<%=i %>" class="panel-collapse collapse<% If i = 1 Then %> in<% End If %>" id="collapse_<%=i %>" role="tabpanel">
<div class="panel-body">
<div class="fz-gallery-wrap">
</div>
</div>
</div>
</div>
<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
</div>
我正在尝试使用可折叠手风琴面板,并从数据库中填充它,但不知道如何更改每个面板的面板 ID。
这是相关代码(我认为 - 不是编码员)
<% i = 1 %>
<% WHILE NOT objRS.EOF %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading clearfix" id="headingOne" role="tab">
<div class="col-md-8 fz-2">
<h4 class="panel-title">
<%=objRS("data")%><br>
<a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">
<%=objRS("titolo")%>
</a>
</h4>
</div>
<div class="col-md-4 fz-2">
<% IF LEN(objRS("idchiave")) > 1 THEN %>
<img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
<% ELSE %>
(No Foto)
<% END IF %>
</div>
</div>
<div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
<div class="panel-body">
<div class="fz-gallery-wrap">
</div>
</div>
</div>
</div>
</div>
<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
您需要将手风琴移到 while...wend 循环之外,然后在单词 "One" 出现的任何地方添加变量 i
,以便每个面板都获得唯一标识符。
<% i = 1 %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<% WHILE NOT objRS.EOF %>
<div class="panel panel-default">
<div class="panel-heading clearfix" id="heading_<%=i %>" role="tab">
<div class="col-md-8 fz-2">
<h4 class="panel-title">
<%=objRS("data")%><br>
<a aria-controls="collapse_<%=i %>" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapse_<%=i %>" role="button">
<%=objRS("titolo")%>
</a>
</h4>
</div>
<div class="col-md-4 fz-2">
<% IF LEN(objRS("idchiave")) > 1 THEN %>
<img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
<% ELSE %>
(No Foto)
<% END IF %>
</div>
</div>
<div aria-labelledby="heading_<%=i %>" class="panel-collapse collapse<% If i = 1 Then %> in<% End If %>" id="collapse_<%=i %>" role="tabpanel">
<div class="panel-body">
<div class="fz-gallery-wrap">
</div>
</div>
</div>
</div>
<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
</div>