Commit 6ef63c2db7194053e62979d26afae24ebcbe8c8e
1 parent
d1cd8422
1、完善布置练习交互
Showing
1 changed file
with
166 additions
and
36 deletions
WebRoot/WEB-INF/jsp/sunvote/homework/homework_edit2.jsp
@@ -109,7 +109,7 @@ | @@ -109,7 +109,7 @@ | ||
109 | <col width="10%"/> | 109 | <col width="10%"/> |
110 | <thead> | 110 | <thead> |
111 | <tr> | 111 | <tr> |
112 | - <th style="text-align:left;"><span>题目数量</span><span class="add">+</span><input type="number" class="w_100" id="que_num" value="1"/><span class="redu">-</span></th> | 112 | + <th style="text-align:left;"><span>题目数量</span><span class="add">+</span><input type="number" class="w_100" id="que_num" value="0"/><span class="redu">-</span></th> |
113 | <th><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" id="ans_num" value="4"/><span class="redu">-</span></th> | 113 | <th><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" id="ans_num" value="4"/><span class="redu">-</span></th> |
114 | <th><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" id="score" value="1"/><span class="redu">-</span></th> | 114 | <th><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" id="score" value="1"/><span class="redu">-</span></th> |
115 | <th></th> | 115 | <th></th> |
@@ -123,7 +123,7 @@ | @@ -123,7 +123,7 @@ | ||
123 | <col width="20%"/> | 123 | <col width="20%"/> |
124 | <col width="10%"/> | 124 | <col width="10%"/> |
125 | <tbody class="subject_body_tbody"> | 125 | <tbody class="subject_body_tbody"> |
126 | - <tr> | 126 | + <!-- <tr> |
127 | <td class="first">1</td> | 127 | <td class="first">1</td> |
128 | <td class="middle"> | 128 | <td class="middle"> |
129 | 129 | ||
@@ -157,7 +157,7 @@ | @@ -157,7 +157,7 @@ | ||
157 | <td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="4"/><span class="redu">-</span></td> | 157 | <td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="4"/><span class="redu">-</span></td> |
158 | <td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td> | 158 | <td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td> |
159 | <td class="last"><a onclick="del('${var.ID}');"><img src="static/images/remove.png" /></a></td> | 159 | <td class="last"><a onclick="del('${var.ID}');"><img src="static/images/remove.png" /></a></td> |
160 | - </tr> | 160 | + </tr>--> |
161 | </tbody> | 161 | </tbody> |
162 | </table> | 162 | </table> |
163 | </div> | 163 | </div> |
@@ -202,64 +202,194 @@ | @@ -202,64 +202,194 @@ | ||
202 | } | 202 | } |
203 | 203 | ||
204 | }); | 204 | }); |
205 | - var work={ | ||
206 | - que_num:1, | 205 | + var work={ //保存标题框中的数字框的值 |
206 | + que_num:0, | ||
207 | ans_num:4, | 207 | ans_num:4, |
208 | - score:1 | 208 | + score:0 |
209 | } | 209 | } |
210 | //点击+执行操作 | 210 | //点击+执行操作 |
211 | - function creat_work(obj){ | ||
212 | - var _id=obj.siblings(".w_100").attr("id") | ||
213 | - if(_id=="que_num"){ | ||
214 | - var que_index=$(".subject_body_tbody tr").length+1; | ||
215 | - $(".subject_body_tbody").append('<tr><td class="first">'+que_index+'</td><td class="middle"><div class="question question'+que_index+'"><ul></ul></div></td><td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="'+$("#ans_num").val()+'"/><span class="redu">-</span></td><td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td><td class="last"><a onclick="del();"><img src="static/images/remove.png" /></a></td></tr>'); | ||
216 | - for(i=0;i<parseInt($("#ans_num").val());i++){ | ||
217 | - $(".question"+que_index+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>') | 211 | + function creat_work(_id,index,num){//index:开始序号,num:目标序号 |
212 | + | ||
213 | + if(_id=="que_num"){ //新增题目 | ||
214 | + for(j=index;j<=num;j++){ | ||
215 | + $(".subject_body_tbody").append('<tr><td class="first">'+j+'</td><td class="middle"><div class="question question'+j+'"><ul></ul></div></td><td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="'+$("#ans_num").val()+'"/><span class="redu">-</span></td><td class="middle"><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" value="1"/><span class="redu">-</span></td><td class="last"><a class="remove"><img src="static/images/remove.png" /></a></td></tr>'); | ||
216 | + for(i=0;i<work.ans_num;i++){ | ||
217 | + $(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>') | ||
218 | + } | ||
219 | + } | ||
220 | + } | ||
221 | + else if(_id=="ans_num"){//新增选项 | ||
222 | + for(j=1;j<=work.que_num;j++){ //轮询每道题目 | ||
223 | + var now_length=$(".question"+j+" ul").find(".btn").length; //获取当前题目选项个数 | ||
224 | + if(now_length<work.ans_num){ //当前题目选项个数小于数字框中个数,则把选项个数增加到数字框中的个数 | ||
225 | + for(i=now_length;i<work.ans_num;i++){ | ||
226 | + console.log("index:"+index+"-"+"num:"+num+"i:"+i); | ||
227 | + $(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>') | ||
228 | + } | ||
229 | + } | ||
230 | + if(now_length>work.ans_num){//当前题目选项个数大于数字框中个数,则把选项个数减少到数字框中的个数 | ||
231 | + for(i=now_length;i>=work.ans_num;i--){ | ||
232 | + $(".question"+j+" ul").find(".btn").eq(work.ans_num).remove(); | ||
233 | + } | ||
234 | + } | ||
235 | + | ||
236 | + } | ||
237 | + | ||
238 | + }else{ | ||
239 | + if(_id.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ //没有id,但是class中含有ans_num,则为单个题目中的选项设置框 | ||
240 | + var _index=_id.closest("tr").index()+1; | ||
241 | + for(i=index;i<=num;i++){ | ||
242 | + $(".question"+_index+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i-1)+'</li>') | ||
243 | + } | ||
218 | } | 244 | } |
219 | } | 245 | } |
220 | } | 246 | } |
221 | //点击-执行操作 | 247 | //点击-执行操作 |
222 | - function remove_work(obj,index,num){ | ||
223 | - var _id=obj.siblings(".w_100").attr("id") | ||
224 | - if(_id=="que_num"){ | ||
225 | - for(i=index;i<(index+num);i++){ | ||
226 | - $(".subject_body_tbody tr").eq(i).remove(); | 248 | + function remove_work(_id,index,num){ |
249 | + | ||
250 | + if(_id=="que_num"){ //减少题目 | ||
251 | + for(i=index;i<=num;i++){ | ||
252 | + $(".subject_body_tbody tr").eq(index).remove(); | ||
253 | + } | ||
254 | + } | ||
255 | + if(_id=="ans_num"){ //减少选项 | ||
256 | + for(j=1;j<=work.que_num;j++){ //轮询每道题目 | ||
257 | + var now_length=$(".question"+j+" ul").find(".btn").length; //获取当前题目中的选项个数 | ||
258 | + if(now_length>work.ans_num){ //如果当前选项个数大于数字框中的值,则减少选项个数到数字框中的个数 | ||
259 | + for(i=now_length;i>=work.ans_num;i--){ | ||
260 | + $(".question"+j+" ul").find(".btn").eq(work.ans_num).remove(); | ||
261 | + } | ||
262 | + } | ||
263 | + if(now_length<work.ans_num){ //如果当前选项个数小于数字框中的值,则增加选项个数到数字框中的个数 | ||
264 | + for(i=now_length;i<work.ans_num;i++){ | ||
265 | + $(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>') | ||
266 | + } | ||
267 | + } | ||
268 | + | ||
269 | + } | ||
270 | + }else{ | ||
271 | + if(_id.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ //没有id值,但是类名中含有ans_num,则判断为单个题目中的选项设置框 | ||
272 | + var _index=_id.closest("tr").index()+1; | ||
273 | + for(i=index;i<=num;i++){ | ||
274 | + $(".question"+_index+" ul").find(".btn").eq(index).remove(); | ||
275 | + } | ||
227 | } | 276 | } |
228 | } | 277 | } |
278 | + | ||
229 | } | 279 | } |
230 | - $(".add").on("click",function(){ | 280 | + //点击+按钮 |
281 | + $(document).on("click",".add",function(){ | ||
282 | + var _that=$(this); | ||
231 | var temp_num=0; | 283 | var temp_num=0; |
232 | - temp_num=parseInt($(this).siblings(".w_100").val()); | 284 | + //获取当前按钮旁边数字框的值 |
285 | + temp_num=parseInt(_that.siblings(".w_100").val()); | ||
233 | temp_num+=1; | 286 | temp_num+=1; |
234 | - $(this).siblings(".w_100").val(temp_num); | ||
235 | - | ||
236 | - if($(this).siblings(".w_100").attr("id")){ | ||
237 | - var _class=$(this).siblings(".w_100").attr("id"); | ||
238 | - | 287 | + //点击+号,数字框中的数字+1 |
288 | + _that.siblings(".w_100").val(temp_num); | ||
289 | + //如果数字框有id,则是标题栏上面的数字框 | ||
290 | + if(_that.siblings(".w_100").attr("id")){ | ||
291 | + //将下面的数字框的值设置成标题栏数字框的值 | ||
292 | + var _class=_that.siblings(".w_100").attr("id"); | ||
239 | $("."+_class).val(temp_num); | 293 | $("."+_class).val(temp_num); |
294 | + //题目数 | ||
295 | + if(_class=="que_num"){ | ||
296 | + work.que_num=temp_num; | ||
297 | + creat_work(_class,work.que_num,work.que_num); | ||
298 | + } | ||
299 | + //选项数 | ||
300 | + if(_class=="ans_num"){ | ||
301 | + work.ans_num=temp_num; | ||
302 | + creat_work(_class,work.ans_num,work.ans_num); | ||
303 | + } | ||
304 | + } | ||
305 | + else{ | ||
306 | + if(_that.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ | ||
307 | + creat_work(_that,temp_num,temp_num); | ||
308 | + } | ||
240 | } | 309 | } |
241 | - creat_work($(this)); | ||
242 | - }) | ||
243 | - $(".redu").on("click",function(){ | ||
244 | 310 | ||
311 | + }) | ||
312 | + //点击-按钮 | ||
313 | + $(document).on("click",".redu",function(){ | ||
314 | + var _that=$(this); | ||
245 | var temp_num=0; | 315 | var temp_num=0; |
246 | - temp_num=parseInt($(this).siblings(".w_100").val()); | 316 | + |
317 | + temp_num=parseInt(_that.siblings(".w_100").val()); | ||
247 | temp_num-=1; | 318 | temp_num-=1; |
248 | - if(temp_num<=1){ | ||
249 | - temp_num=1; | 319 | + if(temp_num<0){ |
320 | + temp_num=0; | ||
321 | + return; | ||
250 | } | 322 | } |
251 | - $(this).siblings(".w_100").val(temp_num); | ||
252 | 323 | ||
253 | - if($(this).siblings(".w_100").attr("id")){ | 324 | + _that.siblings(".w_100").val(temp_num); |
325 | + | ||
326 | + if(_that.siblings(".w_100").attr("id")){ | ||
254 | var _class=$(this).siblings(".w_100").attr("id"); | 327 | var _class=$(this).siblings(".w_100").attr("id"); |
255 | - | ||
256 | $("."+_class).val(temp_num); | 328 | $("."+_class).val(temp_num); |
329 | + | ||
330 | + if(_class=="que_num"){ | ||
331 | + work.que_num=temp_num; | ||
332 | + remove_work(_class,work.que_num,work.que_num); | ||
333 | + } | ||
334 | + if(_class=="ans_num"){ | ||
335 | + work.ans_num=temp_num; | ||
336 | + remove_work(_class,work.ans_num,work.ans_num); | ||
337 | + } | ||
338 | + }else{ | ||
339 | + if(_that.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ | ||
340 | + remove_work(_that,temp_num,temp_num); | ||
341 | + } | ||
257 | } | 342 | } |
258 | - //remove_work($(this),$(".subject_body_tbody tr").length-1,1); | 343 | + |
259 | }) | 344 | }) |
345 | + $(document).on("click",".remove",function(){ | ||
346 | + var _that=$(this); | ||
347 | + _that.closest("tr").remove(); | ||
348 | + work.que_num=$(".first").length; | ||
349 | + $("#que_num").val(work.que_num); | ||
350 | + for(i=0;i<$(".first").length;i++){ | ||
351 | + //console.log($(".first").closest("tr").index()); | ||
352 | + $(".first").eq(i).text(i+1); | ||
353 | + $(".question").eq(i).attr("class","question question"+(i+1)); | ||
354 | + } | ||
355 | + }); | ||
356 | + $(document).on("click","li.btn ",function(){ | ||
357 | + if($(this).attr("class").indexOf("on")>-1) | ||
358 | + $(this).removeClass("on"); | ||
359 | + else | ||
360 | + $(this).addClass("on"); | ||
361 | + }); | ||
260 | $("#que_num").change(function(){ | 362 | $("#que_num").change(function(){ |
261 | - remove_work($(this),$(".subject_body_tbody tr").length-1,1); | 363 | + var now_num=parseInt($("#que_num").val()); |
364 | + var old_num=parseInt(work.que_num); | ||
365 | + var _temp=now_num-old_num; | ||
366 | + | ||
367 | + if(_temp>0){ | ||
368 | + creat_work($(this).attr("id"),(old_num+1),now_num); | ||
369 | + }else{ | ||
370 | + remove_work($(this).attr("id"),now_num,old_num); | ||
371 | + } | ||
372 | + | ||
373 | + work.que_num=now_num; | ||
374 | + | ||
262 | }) | 375 | }) |
376 | + $("#ans_num").change(function(){ | ||
377 | + var now_num=parseInt($("#ans_num").val()); | ||
378 | + var old_num=parseInt(work.ans_num); | ||
379 | + var _temp=now_num-old_num; | ||
380 | + | ||
381 | + $(".ans_num").val(now_num); | ||
382 | + work.ans_num=now_num; | ||
383 | + | ||
384 | + if(_temp>0){ | ||
385 | + creat_work($(this).attr("id"),(old_num+1),now_num); | ||
386 | + }else{ | ||
387 | + remove_work($(this).attr("id"),now_num,old_num); | ||
388 | + } | ||
389 | + | ||
390 | + | ||
391 | + }); | ||
392 | + | ||
263 | 393 | ||
264 | 394 | ||
265 | function save(){ | 395 | function save(){ |