1、完善布置练习交互

=
1 parent d1cd8422
Showing 1 changed file with 166 additions and 36 deletions
WebRoot/WEB-INF/jsp/sunvote/homework/homework_edit2.jsp
@@ -109,7 +109,7 @@
 								<col width="10%"/>
 								<thead>
 									<tr>
-										<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>
+										<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>
 										<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>
 										<th><span>分值</span><span class="add">+</span><input type="number" class="w_100 score" id="score" value="1"/><span class="redu">-</span></th>
 										<th></th>
@@ -123,7 +123,7 @@
 								<col width="20%"/>
 								<col width="10%"/>
 								<tbody class="subject_body_tbody">									
-									<tr>
+									<!-- <tr>
 										<td class="first">1</td>
 										<td class="middle">
@@ -157,7 +157,7 @@
 										<td class="middle"><span>选项个数</span><span class="add">+</span><input type="number" class="w_100 ans_num" value="4"/><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('${var.ID}');"><img src="static/images/remove.png" /></a></td>
-									</tr>
+									</tr>-->
 								</tbody>
 							</table>
 						</div>
@@ -202,64 +202,194 @@
 			}
 		});
-		var work={
-			que_num:1,
+		var work={        //保存标题框中的数字框的值
+			que_num:0,
 			ans_num:4,
-			score:1
+			score:0
 		}
 		//点击+执行操作
-		function creat_work(obj){
-			var _id=obj.siblings(".w_100").attr("id")
-			if(_id=="que_num"){
-				var que_index=$(".subject_body_tbody tr").length+1;
-				$(".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>');
-				for(i=0;i<parseInt($("#ans_num").val());i++){
-					$(".question"+que_index+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
+		function creat_work(_id,index,num){//index:开始序号，num:目标序号
+			
+			if(_id=="que_num"){    //新增题目
+				for(j=index;j<=num;j++){
+					$(".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>');
+					for(i=0;i<work.ans_num;i++){
+						$(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
+					}
+				}
+			}
+			else if(_id=="ans_num"){//新增选项
+				for(j=1;j<=work.que_num;j++){	//轮询每道题目
+					var now_length=$(".question"+j+" ul").find(".btn").length; //获取当前题目选项个数
+					if(now_length<work.ans_num){   //当前题目选项个数小于数字框中个数，则把选项个数增加到数字框中的个数
+						for(i=now_length;i<work.ans_num;i++){
+							console.log("index:"+index+"-"+"num:"+num+"i:"+i);
+							$(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
+						}
+					}
+					if(now_length>work.ans_num){//当前题目选项个数大于数字框中个数，则把选项个数减少到数字框中的个数
+						for(i=now_length;i>=work.ans_num;i--){
+							$(".question"+j+" ul").find(".btn").eq(work.ans_num).remove();
+						}
+					}
+					
+				}
+				
+			}else{
+				if(_id.siblings(".w_100").attr("class").indexOf("ans_num")>-1){ //没有id，但是class中含有ans_num，则为单个题目中的选项设置框
+					var _index=_id.closest("tr").index()+1;
+					for(i=index;i<=num;i++){
+						$(".question"+_index+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i-1)+'</li>')
+					}
 				}
 			}
 		}
 		//点击-执行操作
-		function remove_work(obj,index,num){
-			var _id=obj.siblings(".w_100").attr("id")
-			if(_id=="que_num"){	
-				for(i=index;i<(index+num);i++){
-					$(".subject_body_tbody tr").eq(i).remove();
+		function remove_work(_id,index,num){
+			
+			if(_id=="que_num"){	//减少题目
+				for(i=index;i<=num;i++){
+					$(".subject_body_tbody tr").eq(index).remove();
+				}
+			}
+			if(_id=="ans_num"){  //减少选项
+				for(j=1;j<=work.que_num;j++){    //轮询每道题目
+					var now_length=$(".question"+j+" ul").find(".btn").length;  //获取当前题目中的选项个数
+					if(now_length>work.ans_num){     //如果当前选项个数大于数字框中的值，则减少选项个数到数字框中的个数
+						for(i=now_length;i>=work.ans_num;i--){
+							$(".question"+j+" ul").find(".btn").eq(work.ans_num).remove();
+						}
+					}
+					if(now_length<work.ans_num){  //如果当前选项个数小于数字框中的值，则增加选项个数到数字框中的个数
+						for(i=now_length;i<work.ans_num;i++){
+							$(".question"+j+" ul").append('<li class="btn btn-default">'+String.fromCharCode(0x41 + i)+'</li>')
+						}
+					}
+					
+				}
+			}else{
+				if(_id.siblings(".w_100").attr("class").indexOf("ans_num")>-1){  //没有id值，但是类名中含有ans_num，则判断为单个题目中的选项设置框
+					var _index=_id.closest("tr").index()+1;
+					for(i=index;i<=num;i++){
+						$(".question"+_index+" ul").find(".btn").eq(index).remove();
+					}
 				}
 			}
+			
 		}
-		$(".add").on("click",function(){
+		//点击+按钮
+		$(document).on("click",".add",function(){
+			var _that=$(this);
 			var temp_num=0;
-			temp_num=parseInt($(this).siblings(".w_100").val());
+			//获取当前按钮旁边数字框的值
+			temp_num=parseInt(_that.siblings(".w_100").val());
 			temp_num+=1;
-			$(this).siblings(".w_100").val(temp_num);
-			
-			if($(this).siblings(".w_100").attr("id")){
-				var _class=$(this).siblings(".w_100").attr("id");
-				
+			//点击+号，数字框中的数字+1
+			_that.siblings(".w_100").val(temp_num);
+			//如果数字框有id，则是标题栏上面的数字框
+			if(_that.siblings(".w_100").attr("id")){
+				//将下面的数字框的值设置成标题栏数字框的值
+				var _class=_that.siblings(".w_100").attr("id");
 				$("."+_class).val(temp_num);
+				//题目数
+				if(_class=="que_num"){
+					work.que_num=temp_num;
+					creat_work(_class,work.que_num,work.que_num);
+				}
+				//选项数
+				if(_class=="ans_num"){
+					work.ans_num=temp_num;
+					creat_work(_class,work.ans_num,work.ans_num);
+				}				
+			}
+			else{
+				if(_that.siblings(".w_100").attr("class").indexOf("ans_num")>-1){
+					creat_work(_that,temp_num,temp_num);
+				}
 			}
-			creat_work($(this));
-		})
-		$(".redu").on("click",function(){
+		})
+		//点击-按钮
+		$(document).on("click",".redu",function(){
+			var _that=$(this);
 			var temp_num=0;
-			temp_num=parseInt($(this).siblings(".w_100").val());
+			
+			temp_num=parseInt(_that.siblings(".w_100").val());
 			temp_num-=1;
-			if(temp_num<=1){
-				temp_num=1;
+			if(temp_num<0){
+				temp_num=0;
+				return;
 			}
-			$(this).siblings(".w_100").val(temp_num);
-			if($(this).siblings(".w_100").attr("id")){
+			_that.siblings(".w_100").val(temp_num);
+			
+			if(_that.siblings(".w_100").attr("id")){
 				var _class=$(this).siblings(".w_100").attr("id");
-				
 				$("."+_class).val(temp_num);
+				
+				if(_class=="que_num"){
+					work.que_num=temp_num;
+					remove_work(_class,work.que_num,work.que_num);
+				}
+				if(_class=="ans_num"){
+					work.ans_num=temp_num;
+					remove_work(_class,work.ans_num,work.ans_num);
+				}	
+			}else{
+				if(_that.siblings(".w_100").attr("class").indexOf("ans_num")>-1){
+					remove_work(_that,temp_num,temp_num);
+				}
 			}
-			//remove_work($(this),$(".subject_body_tbody tr").length-1,1);
+			
 		})
+		$(document).on("click",".remove",function(){
+			var _that=$(this);
+			_that.closest("tr").remove();
+			work.que_num=$(".first").length;
+			$("#que_num").val(work.que_num);
+			for(i=0;i<$(".first").length;i++){
+				//console.log($(".first").closest("tr").index());
+				$(".first").eq(i).text(i+1);
+				$(".question").eq(i).attr("class","question question"+(i+1));
+			}
+		});
+		$(document).on("click","li.btn ",function(){
+			if($(this).attr("class").indexOf("on")>-1)
+				$(this).removeClass("on");
+			else
+				$(this).addClass("on");
+		});
 		$("#que_num").change(function(){
-			remove_work($(this),$(".subject_body_tbody tr").length-1,1);
+			var now_num=parseInt($("#que_num").val());
+			var old_num=parseInt(work.que_num);
+			var _temp=now_num-old_num;
+			
+			if(_temp>0){
+				creat_work($(this).attr("id"),(old_num+1),now_num);
+			}else{
+				remove_work($(this).attr("id"),now_num,old_num);
+			}
+			
+			work.que_num=now_num;
+			
 		})
+		$("#ans_num").change(function(){
+			var now_num=parseInt($("#ans_num").val());
+			var old_num=parseInt(work.ans_num);
+			var _temp=now_num-old_num;
+			
+			$(".ans_num").val(now_num);
+			work.ans_num=now_num;
+			
+			if(_temp>0){
+				creat_work($(this).attr("id"),(old_num+1),now_num);
+			}else{
+				remove_work($(this).attr("id"),now_num,old_num);
+			}
+			
+			
+		});
+		
 		function save(){