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