逻辑思考之选择限定范围内的数量插入不指定位置并且具有替换功能

简介:

这个逻辑文字描述好像很复杂,具体到实践功能就知道我想表达的是什么了。把逻辑想通了,这个功能也就写出来了,demo如下:

请转载此文的朋友务必附带原文链接,谢谢。

原文链接:http://xuyran.blog.51cto.com/11641754/1890678

wKiom1h0XRLRJocNAAAPdYlAC5I332.png-wh_50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />
     < title ></ title >
     <!--引用jquery-->
     < script  src = "http://code.jquery.com/jquery-2.0.3.min.js"  type = "text/javascript" ></ script >
     < style  type = "text/css" >
     *{
         margin: 0px;
         padding: 0px;
         list-style: none;
     }
     .list{
         padding: 10px;
         border: solid 1px #000000;
         width: 500px;
         height: 200px;
         margin-top: 20px;
     }
     .list li{
         float: left;
         width: 100px;
         border-bottom: dashed 1px #C4C4C4;
         padding-bottom: 5px;
         margin-top: 20px;
         margin-left: 20px;
     }
     .check{
         float: left;
         width: 8px;
         height: 8px;
         background: #FFFFFF;
         border: solid 1px #000000;
         border-radius: 50%;
         margin-top: 5px;
         margin-right: 10px;
     }
     .check.active{
         background: #000000;
     }
     .bottom li{
         
     }
     </ style >
     < script  type = "text/javascript" >
         $(function(){
             var arr = []; //保存已经选中的项插入的对应的位置
             $(".check").on("click",function(){
                 $(this).addClass("active");
                 var len = $(".top").find(".active").length; //已经选中的数量
                 var txt = $(this).parent().text(); //要插入的内容
                 if($(this).hasClass("active") && ifExist()&& len <= 4){  //状态:如果已经选中而且之前没有插入过同时总数量小于限定数量,则执行如下
                     $(".bottom li").each(function(){
                         var con = $(this).text();
                         if(!con){
                         arr[txt] = $(this).index(); 
                         $(this).html(txt);
                         return false;
                         }  
                     });
                 }else if($(this).hasClass("active") && !ifExist()){  //状态:如果已经选中,之前已经插入过, 则执行如下
                     $(this).removeClass("active");
                     var index = arr[txt];  //读取当前选中之前插入的位置
                     $(".bottom li").eq(index).html("");
                 }else{
                     $(this).removeClass("active");
                     alert("最多只能选择4个");
                 }
                 function ifExist(){
                     var result;
                     $(".bottom li").each(function(){ //遍历插入列表中要插入选项是否存在,如果存在返回false,否则返回true
                         var con = $(this).text();
                         if(con != txt){
                             result = true;
                         }else{
                             result = false;
                             return false;
                         }
                     });
                     return result;
                 }
             });
         
         })
     </ script >
</ head >
< body >
< ul  class = "list top" >
     < li >< span  class = "check" ></ span >11111</ li >
     < li >< span  class = "check" ></ span >22222</ li >
     < li >< span  class = "check" ></ span >33333</ li >
     < li >< span  class = "check" ></ span >44444</ li >
     < li >< span  class = "check" ></ span >55555</ li >
     < li >< span  class = "check" ></ span >66666</ li >
</ ul >
< ul  class = "list bottom" >
     < li ></ li >
     < li ></ li >
     < li ></ li >
     < li ></ li >
</ ul >
< script >
     
</ script >
</ body >
     
</ html >


本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1890678
相关文章
|
5月前
|
存储 语音技术 索引
语音识别,列表的定义语法,列表[],列表的下标索引,从列表中取出来特定的数据,name[0]就是索引,反向索引,头部是-1,my[1][1],嵌套列表使用, 列表常用操作, 函数一样,需引入
语音识别,列表的定义语法,列表[],列表的下标索引,从列表中取出来特定的数据,name[0]就是索引,反向索引,头部是-1,my[1][1],嵌套列表使用, 列表常用操作, 函数一样,需引入
|
6月前
|
C++ 容器
C++字符串string容器(构造、赋值、拼接、查找、替换、比较、存取、插入、删除、子串)
C++字符串string容器(构造、赋值、拼接、查找、替换、比较、存取、插入、删除、子串)
|
存储 JavaScript 前端开发
过滤掉数组中重复的元素
过滤掉数组中重复的元素
55 0
Python应用专题 | 17:根据子字符列表过滤掉给定列表
根据子字符列表过滤掉给定列表,从而实现数据的筛查或者去除
|
存储 编译器 C++
【c++】:list模拟实现“任意位置插入删除我最强ƪ(˘⌣˘)ʃ“
【c++】:list模拟实现“任意位置插入删除我最强ƪ(˘⌣˘)ʃ“
110 0
|
C++ 容器
【C++要笑着学】list 常用接口介绍 | 支持任意位置O(1)插入删除的顺序容器 list(二)
一听 list ,我们就知道是个双向带头循环链表。list 在实际的运用中用的没有 vector 多,包括大家在刷题的时候 list 也出现的很少,因为 list 不支持随机访问,有很多数据堆在那里你可能还需要排序一下,list 要排序,就是一个大问题,所以用 vector 的情况较多。
164 1
【C++要笑着学】list 常用接口介绍 | 支持任意位置O(1)插入删除的顺序容器 list(二)
|
存储 C++ 容器
【C++要笑着学】list 常用接口介绍 | 支持任意位置O(1)插入删除的顺序容器 list(一)
一听 list ,我们就知道是个双向带头循环链表。list 在实际的运用中用的没有 vector 多,包括大家在刷题的时候 list 也出现的很少,因为 list 不支持随机访问,有很多数据堆在那里你可能还需要排序一下,list 要排序,就是一个大问题,所以用 vector 的情况较多。
213 0
【C++要笑着学】list 常用接口介绍 | 支持任意位置O(1)插入删除的顺序容器 list(一)
|
算法 Go
算法练习第十题——寻找重复数(不修改数组)
给定一个包含 n + 1 个整数的数组 nums ,其数字都在 [1, n] 范围内(包括 1 和 n),可知至少存在一个重复的整数。
|
算法
保存不带循环的表
保存不带循环的表
94 0
SwiftUI—如何调整记录在List列表里的顺序
SwiftUI—如何调整记录在List列表里的顺序
273 0
SwiftUI—如何调整记录在List列表里的顺序

热门文章

最新文章