【发布时间】：2017-07-08 01:26:39
【问题描述】：
我有多个复选框，这些复选框是基于 jsp 中核心标签的 foreach 循环从集合中迭代形成的，带有两个参数 ID（这是文本框的 id）和 key。Id 和 key 都已填充基于迭代动态。 Oncheck，它调用一个具有 AJAX 代码的函数。以及来自 ajax 的 response 这是一个 JSON，并且 JSON 根据 key 在同一 div 上动态填充。我正在使用选项卡视图类似于您可以在https://www.w3schools.com/howto/howto_js_tabs.asp 中找到的内容。这些选项卡也由复选框的 id 动态控制。如果单击复选框，则按钮可见，反之亦然。（注意：按钮也会触发 ajax 调用）我现在面临的问题是，如果我禁用复选框，则 div 将保留旧键的值。我知道问题出在我的代码设计上。任何人都可以说如何重新设计它。我将附上代码以供参考：
function enableButton(id, key) {
openError(key);
if (!flag) {
document.getElementById("resultTab").style.display = 'block';
}
if (flag){
document.getElementById(id).checked = false;
}
var lastCharacterOfId = document.getElementById(id).id.charAt(document
.getElementById(id).id.length - 1);
var checkBox = document.getElementById(id);
var button = document.getElementById("btn_" + lastCharacterOfId);
if (checkBox.checked) {
$("#good").html('');
button.style.display = 'block';
button.disabled = false;
counterForScript++;
//openError(key);
} else {
$("#good").html('');
button.style.display = 'none'
button.disabled = true;
if(!flag){
counterForScript--;
}
if (counterForScript > 0) {
console.log(checkBoxKeyArray[counterForScript]);
}
}
if (counterForScript == 0) {
document.getElementById("resultTab").style.display = 'none';
}
函数 openError(key) {
if ($("#aFile").get(0).files.length == 0) {
alert("Please select a file ");
flag = true;
return false;
}
if ($("#aFile").val().substring($("#aFile").val().lastIndexOf(".") + 1,
$("#aFile").val().length) != 'log') {
alert("Please select only Log Files");
flag = true;
return false;
}
$("#good").html('');
var length = 0;
$(document)
.ready(
function() {
$.ajax({
type : "POST",
enctype : 'multipart/form-data',
url : "uploadServlet",
data : formData,
processData : false,
contentType : false,
cache : false,
timeout : 600000,
dataType : 'json',
success : function(data) {
$("#good").append("<br><span align=\"left\" style=\"margin-left:1%\">Total Number of occurences of the search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
+ key
+ "</font>: "
+ data.length
+ "</span>");
if (data.length > 0) {$("#good").append(
"<p align=\"left\" style=\"margin-left:1%;margin-top:4%\">Your search string <font style=\"font-weight: bold; text-transform: uppercase;\">"
+ key
+ "</font> can be found in Line Numbers:");
}
$
.each(
data,
function(id,
element) {
$("#good")
.append(
"<span style=\"margin-left:1%;\">"
+ element
+ "</span></p>");
});
},
});
});
}
HTML 代码：
文件：
<p>
<font style="font-weight: bold;">SEARCH:</font>
<c:forEach var="hm" items="${logAnalysisHashMap}">
<c:set var="count" value="${count + 1}" scope="page" />
<input type="checkbox" id="cb_${count}"
onchange="enableButton(this.id,'${hm.key}');" />
<font style="font-weight: bold; text-transform: uppercase;">
${hm.key} </font>
</c:forEach>
</p>
</div>
<div class="tab" id="resultTab"
style="width: 90%; margin-left: 5%; height: 40%; margin-top: 2%; position: relative; overflow: auto; display: none">
<div style="display: block; clear: both;">
<c:forEach var="hm" items="${logAnalysisHashMap}">
<c:set var="countbtn" value="${countbtn + 1}" scope="page" />
<button class="tablinks" id="btn_${countbtn}"
onclick='openError("${hm.key}");' style="display: none;"
disabled>
<font style="font-weight: bold; text-transform: uppercase;">${hm.key}
</font>
</button>
</c:forEach>
</div>
【问题讨论】：