0
在我的jsp页面上，我有一个循环来循环集合中的元素，这些元素创建动态字段。每次迭代都会创建一个名为editType的字段类型，并将其命名为editType1，editType2 ...如何处理隐藏JQUERY中具有不同名称但具有相同CSS类的动态元素
editType有3种可能的选项。根据用户为editType选择的内容，我需要隐藏不相关的字段，并只显示与他们选择的editType相关的字段。对于每个editType选项，都有一个名为editTypeA，editTypeB和editTypeC的cooresponding tbody。一个例子是，如果editType = A，那么应该显示tbody名称EditTypeA，并且应该隐藏EditType B和EditTypeC。由于每次编辑类型的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;
}
});
}
});
});
问题出在客户端上 - 显示你的CLIENT CODE，而不是你的源代码。 – 2012-02-28 14:34:54
不确定你的意思我有我的jsp代码张贴，你指的是什么客户端代码？ – user984701 2012-02-28 14:36:20