在我的 jsp 页面上，我有一个循环循环集合中的元素，它创建动态字段。每次迭代都会创建一个名为 editType 的字段类型，并将其命名为 editType1、editType2...
editType 有 3 个可能的选项。根据用户为 editType 选择的内容，我需要隐藏不相关的字段并仅显示与他们选择的 editType 相关的字段。对于每个 editType 选项，都有一个对应的 tbody，名称为 editTypeA、editTypeB 和 editTypeC。一个例子是如果 editType = A 那么 tbody 名称 EditTypeA 应该显示并且 EditType B 和 EditTypeC 应该被隐藏。由于每个编辑类型的 tbody 都会在循环中每次创建，我怎样才能让 jquery 函数只为单击的 editType 字段而不是页面上的所有 editType 字段显示适当的 tbody。
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;
}
});
}
});
});
最佳答案
您正在创建多个 <tbody>与ID相同的元素. ID属性意味着只附加到页面上的一个元素。查看生成的源。在我看来你的<tbody>元素应该在循环外创建，但我真的不知道你的数据是什么。
如果我做这样的事情，我可能会创建完全独立的 <table> s 为每个编辑类型，并使用 ID表格上的属性以显示/隐藏它们。
关于java - 如何处理 JQUERY 中具有不同名称但相同 CSS 类的隐藏动态元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9483798/