JQ完成模拟QQ好友分组案例(介绍JQ实现原理)
当我们写这个案例之前，需要引入好JQ文件，以防没有效果
这个案例的需求请看以下效果图
不能重复点击，只有删除掉之后才可以继续点击
效果图：
代码介绍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.boss {
position: relative;
width: 500px;
height: 600px;
border: 1px solid black;
margin: 100px auto;
}
li {
list-style: none;
}
.left {
position: absolute;
width: 50%;
height: 100%;
border: 1px solid red;
top: 0;
left: 0;
}
.right {
position: absolute;
width: 50%;
height: 100%;
border: 1px solid pink;
right: 0;
top: 0;
}
.left_text1,
.left_text2 {
width: 50px;
cursor: pointer;
}
.left_box1>div {
cursor: pointer;
}
.box1 {
cursor: pointer;
}
.boss1 {
height: 20px;
overflow: hidden;
}
.left_text1 {
float: left;
}
.left_text2 {
float: left;
}
.jia {
height: 20px;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 大容器 -->
<div class="boss">
<!-- 左边分组 -->
<div class="left">
<!-- 分组1 -->
<div class="boss1">
<div onclick="group(this)" class="left_text1">分组1 </div>
<div class="jia" onclick="jia(this)">+</div>
</div>
<!-- 到时候直接隐藏这个盒子分组1 -->
<div class="left_box1">
<div data="1" onclick="fun(this)">1</div>
<div data="2" onclick="fun(this)">2</div>
<div data="3" onclick="fun(this)">3</div>
<div data="4" onclick="fun(this)">4</div>
</div>
<!-- 分组2 -->
<div class="boss1">
<div onclick="group(this)" class="left_text2">分组2 </div>
<div class="jia" onclick="jia(this)">+</div>
</div>
<!-- 到时候直接隐藏这个盒子分组2 -->
<div class="left_box1">
<div data="5" onclick="fun(this)">11</div>
<div data="6" onclick="fun(this)">22</div>
<div data="7" onclick="fun(this)">33</div>
<div data="8" onclick="fun(this)">44</div>
<div data="9" onclick="fun(this)">1</div>
<div data="10" onclick="fun(this)">2</div>
<div data="11" onclick="fun(this)">3</div>
<div data="12" onclick="fun(this)">4</div>
</div>
</div>
<!-- 右边 -->
<div class="right"></div>
</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
// 注意 我先写了行内事件 全是传入this this指向本身
// 这是点击分组1与分组2来回显示隐藏
function group(e) {
// 看布局 点击分组1或分组2后找到需要隐藏的div添加toggle()
// toggle()的作用是看你元素是否显示或隐藏 如果是显示它就隐藏 如果是隐藏它就显示
$(e).parent().next().toggle()
}
// 点击数字模块
function fun(e) {
// e 传入的是this 就是本身
// 先不看这一个判断 主要的是下面Clone部分 读懂Clone部分再来看这一段
// 判断点击的是哪一边的div 因为我是直接克隆
if ($(e).parent().attr("class") == "right") {
// 判断点击本身父级的类名是否是right 如果是我们就删除
e.remove()
} else { // 如果类名不是right 就是说明是左边框中的div
// 如果this的父级类名不是right 调用Clone()
Clone(e)
}
}
// 封装克隆与不能重复点击
function Clone(e) {
// 克隆 循环右边创建子级创建div的个数
for (let i = 0; i < $(".right>div").length; i++) {
// 判断自身的自定义属性是否与右边框子级div的自定义属性是否相等
console.log($(".jia").parent().next().children().attr("data"), $(".right>div").eq(i).attr("data"));
if ($(e).attr("data") == $(".right>div").eq(i).attr("data")) {
// 相等直接返回 这是不能重复点击
return
}
}
// 我们直接就是克隆 点了哪个就克隆哪个
let divs = $(e).clone(true)
// 添加类名 主要还是添加一个小手样式
divs.addClass("box1")
// 我们把克隆好的div添加到右边框中
$(".right").append(divs)
}
// 点击+
function jia(e) {
// 我们直接调用Clone()
// 我们把左边中数字添加到右边 children()获取所有子元素
// 看到这注意看我的布局就可以找到
// 必须循环
for (let i = 0; i < $(e).parent().next().children().length; i++) {
// children()获取的是一个集合
Clone($(e).parent().next().children().eq(i))
}
}
</script>
</html>
感谢大家的阅读，如有不对的地方，或是有bug的地方，可以向我提出，感谢大家，过一段时间会写一篇用原生JS实现这个案例。
