HTML:
<!doctype html> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script src="jQuery.question.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var qst = new $.question($(".box")); qst.initialize(); }) </script> <link href="question.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="box"> <div class="question" qId="1"> <span class="title"><i class="red">*</i>Question<b class="num">1</b>：</span> <input class="textInput" type="text"/> <a class="add" title="Add">+</a> <a class="del" title="Delete"> -</a> </div> <div class="question-type"> <span class="title"><i class="red">*</i>Question Type：</span> <span class="single"><input rel="singleSel" type="radio" checked="checked"/><label rel="singleSel">Single Choice</label></span> <span class="multiple"><input rel="multipleSel" type="radio" /><label rel="multipleSel">Multiple Choice</label></span> <span class="subjective"><input rel="subjective" type="radio" /><label rel="subjective">Subjective Item</label></span> </div> <div class="answer-group"> <div class="answer singleSel"> <p class="item" aId="A"> Single Choice Answer<b class="num">A</b>： <input class="textInput" /> <a class="add" title="Add">+</a> <span class="del" title="Delete">-</span> </p> <p class="item" aId="B"> Single Choice Answer<b class="num">B</b>： <input class="textInput" /> <a class="add" title="Add">+</a> <a class="del" title="Delete">-</a> </p> </div> <div class="answer multipleSel"style="display:none;"> <p class="item" aId="A"> Multiple Choice Answer<b class="num">A</b>： <input class="textInput" /> <a class="add" title="Add">+</a> <span class="del" title="Delete">-</span> </p> <p class="item" aId="B"> Multiple Choice Answer<b class="num">B</b>： <input class="textInput" /> <a class="add" title="Add">+</a> <a class="del" title="Delete">-</a> </p> </div> <div class="answer subjective" style="display:none;"> <p class="item" aId="A"> Subjective Item Answer<b class="num">A</b>： <input class="textInput" /> <a class="add" title="Add">+</a> <span class="del" title="Delete">-</span> </p> <p class="item" aId="B"> Subjective Item Answer<b class="num">B</b>： <input class="textInput" /> <a class="add" title="Add">+</a> <a class="del" title="Delete">-</a> </p> </div> </div> </div> </body> </html>
question.css
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,selectth,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,5b8b4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var,i{font-style:normal;} code,kbd,pre,samp,del{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;outline:none;-moz-transition: all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img,textarea,select{border:0;outline:none} textarea{resize:none} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .cf:after{content:' 020';clear:both;display:block;height:0;} .cf{*zoom:1;} .fl{display:inline;float:left;} .fr{display:inline;float:right;} .box{ padding:30px; } .box .add, .box .del{ cursor:pointer; display:inline-block; font-size:18px; margin-left:5px; } .box .textInput{ border:1px solid #ccc; padding:5px; line-height:14px; } .question-type{ margin-top:10px; } .box .title .red{ color:#c00; } .box .answer{ padding-left:30px; margin-top:10px; } .box .single,.box .multiple,.box .subjective{ margin-right:10px; } .box .single input,.box .multiple input,.box .subjective input{ margin-right:5px; vertical-align:middle; vertical-align:-3px ; } .box .item{ margin-bottom:10px; } .box a{ text-decoration:none; }
jQuery.question.js
1 /** 2 *----------- 3 @Version: 1.0 4 @Author Qadir.Du, Qadir.du@gmail.com 5 @Created: 26.10.2013 6 @Describe Add and delete question,Add and delete answer 7 *----------- 8 ***/ 9 10 (function($,undefined){ 11 'use strict'; 12 var 13 //save question number 14 cacheQ = [1], 15 16 //deleted question number array 17 deletedQuestionNumArr =[]; 18 19 $.question = function(container){ 20 this.container = container; 21 } 22 $.question.prototype ={ 23 initialize:function(){ 24 this.addQuestion(); 25 this.deleteQuestion(); 26 this.changeQuestionType(); 27 this.addAnswer(); 28 this.deleteAnswer(); 29 }, 30 //add question 31 addQuestion:function(){ 32 var _self = this; 33 34 //bind the click event of add 35 _self.container.delegate('.question .add','click',clickAdd); 36 function clickAdd(){ 37 var qId = $(this).parents(".question").attr("qId"); 38 39 //reassign into this.container 40 _self.container = $(this).parents('.box'); 41 42 var addQid = _self._addQuestionId(), 43 clone = _self.container.clone(true); 44 clone.find('.question').attr('qId',addQid); 45 clone.find('.question .title .num').html(addQid); 46 47 //add the elements of new question 48 _self.container.after(clone.css({'opacity':0})); 49 if(!clone.is(":animated")) clone.animate({'opacity':'1'},300); 50 } 51 52 }, 53 //delete question 54 deleteQuestion:function(){ 55 var _self = this; 56 57 //bind the click event of delete 58 _self.container.delegate('.question .del','click',clickDel); 59 60 function clickDel(){ 61 var qId = $(this).parents(".question").attr("qId"); 62 63 //reassign into this.container 64 _self.container = $(this).parents('.box'); 65 66 if(cacheQ.length<=1){ 67 alert("手下留情噢，仅有的一个问题咯！"); 68 }else{ 69 if(!_self.container.is(":animated")) 70 _self.container.animate({'opacity':0},300,function(){ 71 _self.container.remove(); 72 }); 73 } 74 _self._deleteQuestionId(qId); 75 76 } 77 78 }, 79 80 //return question number of to be added 81 _addQuestionId:function(){ 82 if(deletedQuestionNumArr.length===0){ 83 var maxValue = this._max(cacheQ); 84 cacheQ.push(maxValue+1); 85 return maxValue+1; 86 }else{ 87 deletedQuestionNumArr =this._uniq(deletedQuestionNumArr); 88 this._sort(deletedQuestionNumArr); 89 var dns = deletedQuestionNumArr.shift(); 90 cacheQ.push(dns); 91 return dns; 92 } 93 }, 94 //Delete the specified number from cacheQ ，then push the deleted number to deletedNumArr 95 _deleteQuestionId:function(qId){ 96 for(var i=0;i<cacheQ.length;i++){ 97 if(cacheQ[i]===parseInt(qId)&&cacheQ.length !== 1){ 98 deletedQuestionNumArr.push(cacheQ[i]); 99 //Delete the specified number from cacheQ 100 cacheQ.splice(i,1); 101 break; 102 } 103 } 104 105 }, 106 //remove duplicate array elements 107 _uniq:function(arr){ 108 var newArr=[],obj={}; 109 for(var i=0,len=arr.length;i<len;i++){ 110 if(obj[typeof(arr[i]) + arr[i]]!=='undefined'){ 111 newArr.push(arr[i]); 112 obj[typeof(arr[i])+arr[i]]='undefined'; 113 } 114 } 115 return newArr; 116 }, 117 //sort ascending 118 _sort:function(arr){ 119 arr.sort(function(a,b){ 120 return a>b; 121 }) 122 }, 123 //get max value of Array 124 _max : function(arr){ 125 return Math.max.apply(Math,arr); 126 }, 127 //change question type 128 changeQuestionType:function(){ 129 this.container.delegate(".question-type input[type='radio'],.question-type label",'click',changeClick); 130 function changeClick(){ 131 var rel = $(this).attr("rel"), 132 $parentsType =$(this).parents(".question-type"); 133 $(this).parent().siblings().find("input[type='radio']").removeAttr("checked"); 134 $(this).parent().find("input[type='radio']").attr("checked","checked"); 135 $parentsType.next(".answer-group").find(".answer").hide(); 136 $parentsType.next(".answer-group").find(".answer").filter("."+rel).show(); 137 } 138 }, 139 //add answer 140 addAnswer:function(){ 141 var _self = this; 142 143 //bind the click event of add 144 _self.container.delegate('.answer-group .add','click',clickAdd); 145 function clickAdd(){ 146 147 var arr =[], 148 $parent = $(this).parent('.item'), 149 $parents = $(this).parents('.answer').find(".item"), 150 clone =$parent.clone(true); 151 $parents.each(function(){ 152 arr.push($(this).attr('aId')); 153 }) 154 if(arr.length >=26){ 155 alert("26个答案够您用的!"); 156 }else{ 157 var addAid = _self._addAnswerId(arr); 158 159 clone.attr('aId',addAid); 160 161 clone.find('.num').html(addAid); 162 163 //add the elements of new question 164 $parent.after(clone.css({'opacity':0})); 165 if(!clone.is(":animated")) clone.animate({'opacity':'1'},300); 166 } 167 } 168 }, 169 //delete answer 170 deleteAnswer:function(){ 171 var _self = this; 172 173 //bind the click event of delete 174 _self.container.delegate('.answer-group .del','click',clickDel); 175 176 function clickDel(){ 177 var $parent = $(this).parent('.item'), 178 $parents = $(this).parents('.answer').find(".item"), 179 len = $parents.length; 180 if(len<=1){ 181 alert("只有一个答案了,so easy!"); 182 }else{ 183 if(!$parent.is(":animated")) 184 $parent.animate({'opacity':0},300,function(){ 185 $parent.remove(); 186 }); 187 } 188 189 } 190 }, 191 192 //return answer number of to be added 193 _addAnswerId:function(arr){ 194 //answer correlation array 195 var tempArr = ['A','B','C','D','E', 196 'F','G','H','I','J','K','L','M','N','O','P', 197 'Q','R','S','T','U','V','W','X','Y','Z'], 198 aId=''; 199 for(var i=0;i<arr.length;i++){ 200 for(var j=0;j<tempArr.length;j++){ 201 if(arr[i]==tempArr[j]){ 202 tempArr.splice(j,1); 203 break; 204 } 205 206 } 207 } 208 aId = tempArr[0]; 209 tempArr= null; 210 return aId; 211 212 } 213 } 214 215 216 })(jQuery)