嘿,所以我的 HTML 中有一个文本区域,每当我单击列表中的文件名时,它就会将文件的内容放在该文本区域中,在文件之间来回单击效果很好。一旦我在文本区域中编辑某些内容,然后尝试再次单击文件名,它就不再执行任何操作或更新该文本区域。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var currentFile;
$(document).ready(function()
{
var request = new XMLHttpRequest();
request.open("GET", "getFiles.php", false);
request.send();
var result = request.responseText;
$("#fileNames").html(request.responseText);
});
$(document).ready(function()
{
$("li").click(function()
{
currentFile = $(this).text();
$("#currentFile").text(currentFile);
var request = new XMLHttpRequest();
request.open("GET", "getFileContents.php?fileName="+currentFile, false);
request.send();
var result = request.responseText;
$("#fileContents").text(result);
});
});
function saveFile()
{
var request = new XMLHttpRequest();
var contents = $("#fileContents").text();
request.open("GET", "saveFile.php?fileName="+currentFile+"&fileContents="+contents, false);
request.send();
}
</script>
<style type="text/css">
ul.fileList li
{
background-color:blue;
}
#fileContents
{
resize: none;
}
</style>
</head>
<body>
<div id="currentFile">No File Selected</div
<br />
<ul id="fileNames" class="fileList">
</ul>
<br />
<textarea id="fileContents" cols="25" rows="5">No Contents</textarea>
<input type="button" onclick="saveFile();" value="Save" />
</body>
</html>