考题的修改

原来的样子如下：

 

 

点击题干文本后如下：

 

 

点击取消后恢复原样，点击提交后提交数据。

点击“详细”按钮后显示相关参考答案和分值：

 

 

点击一个参考答案文本后如下（点击分值文本同样显示）：

 

 

首先，一道考题的Dom结构是这样的：

 

<!-- 考题题目 --> <div class="question" id="T11041700002"> <div class="title"><span>题干：</span><span class="titleTxt">title2</span> <button class="delete">删除考题</button></div> <div class="filename" > <span>源文件名：</span><span class="filenameTxt">计划2.txt</span> <button class="showDetail">详细</button></div> <div class="blanks"> <div class='blank'><span class='answer'><span>答案1：</span><span class='answerTxt' id=answer_T11041700002_1>answer</span></span><span class='score'><span>分值1：</span><span class='scoreTxt' id=score_T11041700002_1>13</span></span></div><div class='blank'><span class='answer'><span>答案2：</span><span class='answerTxt' id=answer_T11041700002_2>修改答案</span></span><span class='score'><span>分值2：</span><span class='scoreTxt' id=score_T11041700002_2>5</span></span></div><div class='blank'><span class='answer'><span>答案3：</span><span class='answerTxt' id=answer_T11041700002_3>answer</span></span><span class='score'><span>分值3：</span><span class='scoreTxt' id=score_T11041700002_3>4</span></span></div> </div> </div>  

 

看起来超混乱的，XD

 

点击文本->输入框，以及提交、取消按钮的代码如下（jQuery）

 

//点击可修改 function clickHandler(e){ var qid; var bid; var type=e.data; var self=this; //判断操作类型 if(type=="title"){ qid=$(this).parent().parent().attr("id"); }else if(type=="answer"||type=="score"){ var arr=this.id.split("_"); qid=arr[1]; bid=arr[2]; } //一系列复杂的操作 var txt=$(this).text(); var $input=$("<input type='text' value='"+txt+"'/>"+ "<button type='button' class='updateBtn'>提交</button>"+ "<button type='button' class='cancelBtn'>取消</button>"); $(this).empty().append($input); //取消 $(".cancelBtn").click(function(e){ //var txt=$(this).attr("name"); e.stopPropagation(); $(self).bind("click",clickHandler); $(self).empty().text(txt); }); //提交 $(".updateBtn").click(function(){ $(this).attr("disabled","disabled"); $(this).siblings().attr("disabled","disabled"); var val=$input.eq(0).val(); $.post("/webExam/servlet/DelQuestionServlet",{ qid:qid, bid:bid, type:type, value:val, action:"update" },function(msg){ if(msg=="1"){ alert("更改成功"); $(self).empty().text(val); }else{ alert("更改失败"); $(self).empty().text(txt); } $(self).bind("click",clickHandler); }); }); $(this).unbind("click"); } 

 

　　从第61行开始判断要修改哪个内容（题干？参考答案？分值？），然后根据实际Dom结构的不同，获取考题id的方式也不同。因为一道考题会有多个考空（参考答案，分值），所以利用id值保存以及获取考题id，考空id以及是考题还是考空，id值的保存形式类似：answer_T11041700002_3。

 

　　这些js代码非常依赖于Dom结构，后者更改了，前者也要进行相应的更改。随着代码越来越复杂，忘记更改的危险也就越大。不过也不要紧，造成的错误很容易通过调试器发现。

 

　　另外，对js的面向对象设计方法不是很了解。就拿当前例子来说，点击一个span中的文字，就变换为一个文本框和提交、取消按钮，文本框内容是原来的文字，点击取消恢复成原来的文字，点击提交可以执行一个function。说实话，我不太想在每个需要实现类似功能的地方都把这些代码写一遍，而是把这些功能封转成一个组件或者对象。不过目前我不清楚怎么实现。

 

　　第70-74行是创建文本框，提交和取消按钮，并且替换掉原来的文字，文本框的值为原来的文字。

 

　　第76、83行分别定义取消、提交按钮的点击事件。

 

　　第78行为取消事件继续派发，79行是恢复总容器的点击事件，因为在第104行取消了总容器的点击事件，如果不取消，那么当按下“取消”按钮时，总容器的click函数也会执行，即使有了78行的代码也一样（这样78行还有啥用啊？不懂）。

 

　　第80行为清空文本框以及两个按钮，恢复成原来的文本。是“原来的文本”，而不是文本框修改后的文本。原来的文本在70行事先保存了。

　　以上代码适用于修改题干、参考答案和分值，修改源文件的函数打算另外定义，因为要生成<select>或者文件上传表单，比较复杂，以后再弄。

 

　　绑定题干、参考答案和分值的点击事件：

//修改题干、答案、分值 $(".titleTxt").bind("click","title",clickHandler); $(".answerTxt").bind("click","answer",clickHandler); $(".scoreTxt").bind("click","score",clickHandler); //修改文件要另外处理，因为比较麻烦 

 

　　调试是用chrome的调试器进行的，该调试器可以设置断点，以便跟踪相关变量的值，按F8可以执行下一步，拥有了调试程序所需要的基本功能。

　　MyEclipse中，F8也是执行下一步，F5、F6、F7目前没用过，网上说分别是跳入方法、跳过方法、从方法中跳出。

 

　　通过开发这些东西，目前我深深地肯定，懂得调试真的很很很重要。如果不能实时跟踪相关变量值，就很容易会被莫名其妙的问题困扰很长时间。如果只用alert或System.out.println这些控制台输出方法跟踪变量值，那么这些方法的编写与删除肯定会花费大量的时间。所以，还是利用调试器设断点、看变量值这种调试方式比较划算。