Jquery jsp:expand/collapse仅适用于列表中的第一个元素
我是jsp的新手。Jquery jsp:expand/collapse仅适用于列表中的第一个元素,jquery,jsp,Jquery,Jsp,我是jsp的新手。 我试图展开/折叠列表中的每个“值代码” 当每个值代码展开时,它应该有一个值项行表 当我单击列表中的第一个值代码时,代码工作正常。 但是,我尝试展开的每个其他值代码都会展开列表中的第一个值代码,而不是我单击的值代码 有什么想法吗 谢谢 <% List<ValueBean> vBeanList = cart.getValueList(); for (int index = 0; index<vBeanList.size(); index++) {
我试图展开/折叠列表中的每个“值代码” 当每个值代码展开时,它应该有一个值项行表 当我单击列表中的第一个值代码时,代码工作正常。 但是,我尝试展开的每个其他值代码都会展开列表中的第一个值代码,而不是我单击的值代码 有什么想法吗 谢谢
<%
List<ValueBean> vBeanList = cart.getValueList();
for (int index = 0; index<vBeanList.size(); index++) {
ValueBean vBean = vBeanList.get(index);
String tdStyle = "";
%>
<br>
<a class="collapsed" id="ValueId" href="javascript:toggleValue()">+ Value Code <%=vBean.getValueCode()%></a>
<table style = "display:none" class="normalTable" id="ValueTable">
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col class="col4"/>
<tr>
<td valign=top><%="Type"%></td>
<td valign=top><%="Description"%></td>
<td valign=top><%="Value"%></td>
<td valign=top><%="Unit"%></td>
</tr>
<%
for (ValueItem item: vBean.getValueSet()) {
%>
<tr>
<td valign=top <%=tdStyle%>><%=item.getType()%></td>
<td valign=top <%=tdStyle%>><%=item.getDescription()%></td>
<td valign=top <%=tdStyle%>><%=item.getDisplayValue()%></td>
<td valign=top <%=tdStyle%>><%=item.getUnit()%></td>
</tr>
<%
}
%>
</table>
<% } %>
<% if (vBeanList.size()<=0) { %>
<i>(No value defined)</i>
<% } %>
<div id="blanketDiv" class="blanket" style="display:none;"></div>
function toggleValue()
{
var groupId = '#ValueId';
var tableId = '#ValueTable';
var domContent= $(groupId).text();
if($(groupId).hasClass('collapsed'))
{
$(groupId).removeClass('collapsed');
$(groupId).addClass('expanded');
$(groupId).text('- ' + domContent.slice(1));
$(tableId).removeAttr('style');
}
else
{
$(groupId).removeClass('expanded');
$(groupId).addClass('collapsed');
$(groupId).text('+ ' + domContent.slice(1));
$(tableId).attr('style', 'display:none');
}
}
您正在创建具有相同ID的多个项目,“ValueId”
。您如何期望$(groupId)
知道您指的是哪一个倍数?(在实践中,它将始终选择第一个,正如您所发现的那样。)您需要使用this
关键字来引用刚刚发生事件的元素,并使用DOM导航方法(例如,.next()
)来确定需要更新哪个表。啊,很简单,谢谢您的帮助!