在我的jsp页面上，我有一个循环，循环集合中的元素，创建动态字段。每次迭代都会创建一个名为editType的字段类型，并将其命名为editType1，editType2 ...
editType有3种可能的选项。根据用户为editType选择的内容，我需要隐藏不相关的字段，并仅显示与他们选择的editType相关的字段。对于每个editType选项，都有一个名为editTypeA，editTypeB和editTypeC的cooresponding tbody。例如，如果editType = A，则应显示名称EditTypeA，并且应隐藏EditType B和EditTypeC。由于每次在循环中都会创建每种edity类型的tbody，我如何让jquery函数仅为单击的editType字段显示相应的tbody，而不是为页面上的所有editType字段显示。
jsp页面如下：
<c:forEach items="${surveyInfo.allSurveyEdits}" var="surveyEdits" varStatus="status">
<tr class="altrow" align="left">
<td height="19">Type:</td>
<td width="17%" colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editType" id="editType${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="A" label="A" />
<sf:option value="B" label="B" />
<sf:option value="C" label="C" />
</sf:select>
</td>
</tr>
<tbody id="editTypeA">
<tr align="left">
<td>Edit Description:</td>
<td colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editFormatDesc" id="editFormatDesc${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="Data is entered in correct format" label="Data is entered in correct format" />
<sf:option value="Correct decimal precision is entered" label="Correct decimal precision is entered" />
</sf:select>
</td>
</tr>
</tbody>
<tbody id="editTypeB">
<tr align="left">
<td>Edit Description:</td>
<td colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editRangeDesc" id="editRangeDesc${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="PCT Diff" label="PCT Diff" />
<sf:option value="Defined Range" label="Defined Range" />
</sf:select>
</td>
</tr>
</tbody>
<tbody id="editTypeC">
<tr align="left">
<td>Edit Description:</td>
<td colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editIntegrityDesc" id="editIntegrityDesc${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="Required Field Validation" label="Required Field Validation" />
<sf:option value="Data Type Validation" label="Data Type Validation" />
<sf:option value="Calculation Validation" label="Calculation Validation" />
</sf:select>
</td>
</tr>
</tbody>
</c:forEach>
我提出的jquery函数，但只有在页面集合中没有多个项目时才有效：
$(document).ready(function() {
$("#editTypeA").hide();
$("#editTypeB").hide();
$("#editTypeC").hide();
if($("#editType").find("option:selected").val() == "A") {
$("#editTypeA").toggle();
}
if($("#editType").find("option:selected").val() == "B") {
$("#editTypeB").toggle();
}
if($("#editType").find("option:selected").val() == "C") {
$("#editTypeC").toggle();
}
$("#editType").change(function() {
if($(this).find("option:selected").val() == "") {
$("#editTypeA").hide();
$("#editTypeB").hide();
$("#editTypeC").hide();
}
if($(this).find("option:selected").val() == "A") {
$("#editTypeA").toggle();
$("#editTypeB").hide();
$("#editTypeC").hide();
$("#editTypeB").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$("#editTypeC").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
if($(this).find("option:selected").val() == "B") {
$("#editTypeB").toggle();
$("#editTypeA").hide();
$("#editTypeC").hide();
$("#editTypeA").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$("#editTypeC").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
if($(this).find("option:selected").val() == "C") {
$("#editTypeC").toggle();
$("#editTypeA").hide();
$("#editTypeB").hide();
$("#editTypeA").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$("#editTypeB").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
});
});
答案 0 :(得分：0)
根据我对您的代码的理解，您需要这样做（虽然它有点像黑客）：
$(".altrow").each(function() {
$parent = $(this).parent();
$editA = $parent.find("#editTypeA");
$editB = $parent.find("#editTypeB");
$editC = $parent.find("#editTypeC");
$allElements = $editA.add($editB).add($editC);
$editType = $parent.find("#editType");
$parent.find($allElements).each(function() {
$(this).hide();
});
if($editType.find("option:selected").val() == "A") {
$editA.toggle();
}
});
你应该可以从那里开始使用那些变量......
修改但是，您仍然需要每个循环使用一个唯一的表格，这将被归类为您唯一的父元素。
答案 1 :(得分：0)
您正在使用相同的<tbody>创建多个ID元素。 ID属性仅用于附加到页面上的一个元素。查看生成的源。在我看来，你的<tbody>元素应该在循环之外创建，但我真的不知道你的数据是什么。
如果我正在做这样的事情，我可能会为每个编辑类型创建完全独立的<table>，并使用表格上的ID属性来显示/隐藏它们。
答案 2 :(得分：0)
我通过使tbody名称包含editType元素的名称来解决这个问题，这使我能够使用* =选择器来获取包含该名称的元素。
感谢您的帮助。
$('select[name*="editType"]').each(function (i) {
});