jquery插件--问题类（新增&&删除）简易版
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:;padding:;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,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:;outline:none}
textarea{resize:none}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:;}
.cf:after{content:'\0020';clear:both;display:block;height:;}
.cf{*zoom:;}
.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\0;
}
.box .item{
margin-bottom:10px;
}
.box a{
text-decoration:none;
}
jQuery.question.js
/**
*-----------
@Version: 1.0
@Author Qadir.Du, Qadir.du@gmail.com
@Created: 26.10.2013
@Describe Add and delete question,Add and delete answer
*-----------
***/ (function($,undefined){
'use strict';
var
//save question number
cacheQ = [1], //deleted question number array
deletedQuestionNumArr =[]; $.question = function(container){
this.container = container;
}
$.question.prototype ={
initialize:function(){
this.addQuestion();
this.deleteQuestion();
this.changeQuestionType();
this.addAnswer();
this.deleteAnswer();
},
//add question
addQuestion:function(){
var _self = this; //bind the click event of add
_self.container.delegate('.question .add','click',clickAdd);
function clickAdd(){
var qId = $(this).parents(".question").attr("qId"); //reassign into this.container
_self.container = $(this).parents('.box'); var addQid = _self._addQuestionId(),
clone = _self.container.clone(true);
clone.find('.question').attr('qId',addQid);
clone.find('.question .title .num').html(addQid); //add the elements of new question
_self.container.after(clone.css({'opacity':0}));
if(!clone.is(":animated")) clone.animate({'opacity':'1'},300);
} },
//delete question
deleteQuestion:function(){
var _self = this; //bind the click event of delete
_self.container.delegate('.question .del','click',clickDel); function clickDel(){
var qId = $(this).parents(".question").attr("qId"); //reassign into this.container
_self.container = $(this).parents('.box'); if(cacheQ.length<=1){
alert("手下留情噢，仅有的一个问题咯！");
}else{
if(!_self.container.is(":animated"))
_self.container.animate({'opacity':0},300,function(){
_self.container.remove();
});
}
_self._deleteQuestionId(qId); } }, //return question number of to be added
_addQuestionId:function(){
if(deletedQuestionNumArr.length===0){
var maxValue = this._max(cacheQ);
cacheQ.push(maxValue+1);
return maxValue+1;
}else{
deletedQuestionNumArr =this._uniq(deletedQuestionNumArr);
this._sort(deletedQuestionNumArr);
var dns = deletedQuestionNumArr.shift();
cacheQ.push(dns);
return dns;
}
},
//Delete the specified number from cacheQ ，then push the deleted number to deletedNumArr
_deleteQuestionId:function(qId){
for(var i=0;i<cacheQ.length;i++){
if(cacheQ[i]===parseInt(qId)&&cacheQ.length !== 1){
deletedQuestionNumArr.push(cacheQ[i]);
//Delete the specified number from cacheQ
cacheQ.splice(i,1);
break;
}
} },
//remove duplicate array elements
_uniq:function(arr){
var newArr=[],obj={};
for(var i=0,len=arr.length;i<len;i++){
if(obj[typeof(arr[i]) + arr[i]]!=='undefined'){
newArr.push(arr[i]);
obj[typeof(arr[i])+arr[i]]='undefined';
}
}
return newArr;
},
//sort ascending
_sort:function(arr){
arr.sort(function(a,b){
return a>b;
})
},
//get max value of Array
_max : function(arr){
return Math.max.apply(Math,arr);
},
//change question type
changeQuestionType:function(){
this.container.delegate(".question-type input[type='radio'],.question-type label",'click',changeClick);
function changeClick(){
var rel = $(this).attr("rel"),
$parentsType =$(this).parents(".question-type");
$(this).parent().siblings().find("input[type='radio']").removeAttr("checked");
$(this).parent().find("input[type='radio']").attr("checked","checked");
$parentsType.next(".answer-group").find(".answer").hide();
$parentsType.next(".answer-group").find(".answer").filter("."+rel).show();
}
},
//add answer
addAnswer:function(){
var _self = this; //bind the click event of add
_self.container.delegate('.answer-group .add','click',clickAdd);
function clickAdd(){ var arr =[],
$parent = $(this).parent('.item'),
$parents = $(this).parents('.answer').find(".item"),
clone =$parent.clone(true);
$parents.each(function(){
arr.push($(this).attr('aId'));
})
if(arr.length >=26){
alert("26个答案够您用的!");
}else{
var addAid = _self._addAnswerId(arr); clone.attr('aId',addAid); clone.find('.num').html(addAid); //add the elements of new question
$parent.after(clone.css({'opacity':0}));
if(!clone.is(":animated")) clone.animate({'opacity':'1'},300);
}
}
},
//delete answer
deleteAnswer:function(){
var _self = this; //bind the click event of delete
_self.container.delegate('.answer-group .del','click',clickDel); function clickDel(){
var $parent = $(this).parent('.item'),
$parents = $(this).parents('.answer').find(".item"),
len = $parents.length;
if(len<=1){
alert("只有一个答案了,so easy!");
}else{
if(!$parent.is(":animated"))
$parent.animate({'opacity':0},300,function(){
$parent.remove();
});
} }
}, //return answer number of to be added
_addAnswerId:function(arr){
//answer correlation array
var tempArr = ['A','B','C','D','E',
'F','G','H','I','J','K','L','M','N','O','P',
'Q','R','S','T','U','V','W','X','Y','Z'],
aId='';
for(var i=0;i<arr.length;i++){
for(var j=0;j<tempArr.length;j++){
if(arr[i]==tempArr[j]){
tempArr.splice(j,1);
break;
} }
}
aId = tempArr[0];
tempArr= null;
return aId; }
} })(jQuery)
DEMO:http://jsfiddle.net/seamar/Z7QFA/2/
jquery插件--问题类（新增&&删除）简易版的更多相关文章
- 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 简易版jquery
最近写了一个简易版的jquery github地址:https://github.com/jiangzhenfei/Easy-Jquery 完成的方法: 1.$('#id') 2.extend扩展 ...
- JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- 基于jquery的提示框JavaScript 插件，类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- 简易jQuery插件
之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...
- 第7章 jQuery插件的使用和写法
第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...
- jQuery插件之validation插件
前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久 ...
- 学生管理系统（SSM简易版）总结
之前用 Servlet + JSP 实现了一个简易版的学生管理系统,在学习了 SSM 框架之后,我们来对之前写过的项目重构一下! 技术准备 为了完成这个项目,需要掌握如下技术: Java 基础知识 前 ...
随机推荐
- LINUX系统中安装ORACLE11g的安装文档，含部分问题解答
1.无法使用命令 /usr/bin/xdpyinfo 自动检查显示器颜色 在linux as5下安装oracle11g,环境都配置好了!等运行./runInstaller的时候无法弹出安装的图形界面我 ...
- dialog弹层背景overlayer实现的方式
1 增加一个层<div class="dialogLayer"></div>, 要不就利用伪元素 ::before 2 利用box-shadow: 0 0 ...
- Python爬虫实例（六）多进程下载金庸网小说
目标任务:使用多进程下载金庸网各个版本(旧版.修订版.新修版)的小说 代码如下: # -*- coding: utf-8 -*- import requests from lxml import et ...
- MySQL left join right join inner join
好记性不如烂笔头 sql连接共三种:内连接,外连接,交叉连接. 内连接包含:等值连接,不等值连接,自然连接 外连接包含:左连接(左外连接),右连接(右外连接) 具体理论见我的博文http://blog ...
- webstorm添加调试nodejs
打开run菜单选择Edit Configurations 展开defaults菜单,选择nodejs 点击+按钮,选择Node.js,出现下面弹出框. 点击ok保存
- navicat的安装
1.首先在官网下载navicat,具体安装步骤比较简单,下一步下一步即可. 2.安装之后,按照下面的网址做法激活 http://www.jianshu.com/p/b1f9194e1e31 3.教程: ...
- 64位win10+cuda8.0+vs2013+cuDNN V5下Caffe的编译安装教程并配置matlab2014a 接口
一.需要安装的软件 1)vs2013,我是在http://www.52pojie.cn/thread-492326-1-1.html这个网址安装的.我之前用的是vs2012,按照网上的配置教程会爆各种 ...
- hdu1864最大报销额(01背包）
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=187#problem/G 该题要注意的就是每张单子A种类的总和不能大与600,同 ...
- Django 连接redis方法
1. 按照redis模块 # 在cmd中 pip3 install redis 2. 测试代码 插入单挑数据 import redis conn = redis.Redis(host='10.0.0. ...
- [LeetCode] 292. Nim Game_Easy tag: Math
You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...