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 基础知识 前 ...
随机推荐
- iOS + Node + MySQL
最近有空,又温习了一下Node ,配合Express 4.x可以很快的搭建一个简单的后台. Node比较适合频繁I/O,大量异步.至于更加复杂的后台逻辑还是用Java,个中滋味自己体验. Expres ...
- createrepo local http yum
https://www.jianshu.com/p/59ca879584a1 repodata作为软件的仓库,其目录下有四个必要文件:filelists.xml.[gz],other.xml.[g ...
- ubuntu/debian ia-libs
ubuntu 14.04强制安装ia32-libs 1.切换到root权限sudo -i 或 sudo su2.进入apt源列表cd /etc/apt/sources.list.d3.添加ubuntu ...
- getParameter和getAttribute区别
(1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为链接关系时,被链接的组件通过getParameter ...
- mysql 操作sql语句 操作数据表
#2. 操作文件 先切换到文件夹下:use db1 查看当前所在的数据库 mysql> select database(); +------------+ | database() | +--- ...
- 002-Spring Cloud 功能简介
一.主要功能 分布式/版本化配置.服务注册与发现.路由.服务间调用.负载均衡.断路器.分布式消息传递 1.云本地应用[Cloud Native Applications] Spring Cloud C ...
- Kylin构建cube时状态一直处于pending
在安装好kylin之后我直接去访问web监控页面发现能够进去,也没有去看日志.然后在运行官方带的例子去bulid cube时去发现状态一直是pending而不是runing.这个时候才去查看日志: 2 ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- XMR恶意挖矿案例简析
前言 数字货币因其技术去中性化和经济价值等属性,逐渐成为大众关注的焦点,同时通过恶意挖矿获取数字货币是黑灰色产业获取收益的重要途径.本文简析通过蜜罐获取的XMR恶意挖矿事件:攻击者通过爆破SSH获取系 ...
- Selenium+Java元素定位之三
首先自己先准备一个表格代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...