左移与右移
- 编写网页，设置CSS完成左移右移的结构和样式设置。
- 通过层级选择器和表单选择器获取选中的操作项。
- 通过
append()方法将匹配到的内容追加到指定元素的尾部。
效果如下：
左移和右移和全部 左移和右移效果实现。
代码如下：
HTML部分：
<body>
<div class="container">
<div class="content-box">
<div class="content-left">
<div class="title left-title">可选项</div>
<select class="itembox left" id="left" multiple>
<option class="item">添加</option>
<option class="item">移动</option>
<option class="item">修改</option>
<option class="item">查询</option>
<option class="item">打印</option>
<option class="item">删除</option>
</select>
</div>
<div class="content-middle">
<button class="remove remove-right">></button>
<button class="remove remove-left"><</button>
<button class="remove remove-right-all">>></button>
<button class="remove remove-left-all"><<</button>
</div>
<div class="content-right">
<div class="title right-title">已选项</div>
<select class="itembox right" id="right" multiple>
</select>
</div>
</div>
</div>
</body>css部分代码如下：
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin-top: 200px;
margin-left: 200px;
}
.content-box {
display: flex;
width: 336px;
height: 300px;
flex-direction: row;
justify-content: space-between;
}
.title {
font-size: 20px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.select {
text-decoration: none;
outline: none;
}
.itembox {
padding: 6px;
width: 120px;
height: 160px;
text-align: center;
outline: none;
text-decoration: none;
border: 1px solid rgb(167, 164, 164);
/* box-sizing: border-box; */
}
.content-middle {
margin-left: 20px;
}
.remove {
margin-bottom: 4px;
width: 60px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: rgb(214, 219, 218);
border-radius: 2px;
border: 1px solid rgb(167, 164, 164);
box-sizing: border-box;
}
.remove:nth-child(1) {
margin-top: 80px;
}
</style>JQuery部分代码如下：
记得加入script引入jquery 的js文件
<script>
//右移事件实现
$('.remove-right').click(function () {
$('.itembox .item:selected').remove().appendTo('#right').prop('selected', false)
})
//左移事件实现
$('.remove-left').click(function () {
$('.itembox .item:selected').remove().appendTo('#left').prop('selected', false)
})
//全部右移事件实现
$('.remove-right-all').click(function () {
$('#left>option').remove().appendTo('#right').prop('selected', false)
})
//全部左移事件实现
$('.remove-left-all').click(function () {
$('#right>option').remove().appendTo('#left').prop('selected', false)
})
</script>改进代码，或者说是另一种写法，基本原理使用选中的项目给他增加类名和删除类名。
这次直接写全部的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.box {
width: 400px;
margin: 60px auto 0;
display: flex;
}
.box-item {
width: 150px;
}
.box-item>.item-title {
font-size: 16px;
text-align: center;
}
.box-item>.item-list {
margin-top: 10px;
padding: 10px;
height: 200px;
border: 1px solid #ccc;
}
.box-item .list-item {
line-height: 1.6;
}
.box-item .list-item.active {
background-color: #eee;
}
.box-btns {
margin: 0 20px;
width: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box-btns>.item-btn {
width: 100%;
height: 26px;
margin-bottom: 6px;
background-color: #eee;
border: 1px solid #ccc;
text-align: center;
line-height: 26px;
border-radius: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<div class="item-title">可选项</div>
<ul class="item-list jq-leftbox">
<li class="list-item">添加</li>
<li class="list-item">移动</li>
<li class="list-item">修改</li>
<li class="list-item">查询</li>
<li class="list-item">打印</li>
<li class="list-item">删除</li>
</ul>
</div>
<div class="box-btns">
<div class="item-btn jq-right">></div>
<div class="item-btn jq-left"><</div>
<div class="item-btn jq-rightall">>></div>
<div class="item-btn jq-leftall"><<</div>
</div>
<div class="box-item">
<div class="item-title">已选项</div>
<ul class="item-list jq-rightbox">
</ul>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script>
$(function () {
let _leftbox = $('.jq-leftbox'),
_rightbox = $('.jq-rightbox');
// 点击每个列表实现选中效果
$('.list-item').click(function () {
$(this).toggleClass('active');
});
$('.jq-right').click(function () {
_rightbox.append(_leftbox.find('.list-item.active'));
});
$('.jq-left').click(function () {
_leftbox.append(_rightbox.find('.list-item.active'));
});
$('.jq-rightall').click(function () {
_rightbox.append(_leftbox.find('.list-item'));
});
$('.jq-leftall').click(function () {
_leftbox.append(_rightbox.find('.list-item'));
});
});
</script>
</body>
</html>记得引入JQuery文件。
用到JQuery里面的DOM操作。
相关知识点：
DOM节点操作
1.节点追加
节点追加指的是在现有的节点树中，进行父子或兄弟节点的追加
- 父子节点添加指的是在匹配到的元素内部添加指定的content内容。
- 兄弟节点指的是在匹配到的元素外部添加指定的content内容。
语法 | 作用 | 说明 |
父子节点 | append(content) | 把content内容追加到匹配的元素内容尾部 |
父子节点 | prepend(content) | 把content内容追加到匹配的元素内容头部 |
父子节点 | appendTo(content) | 把匹配到的内容插入到content内容的尾部 |
父子节点 | prependTo(content) | 把匹配到的内容插入到content内容的头部 |
兄弟节点 | after(content) | 把content内容插入到元素的尾部 |
兄弟节点 | before(content) | 把content内容插入到元素的头部 |
兄弟节点 | insertAfter(content) | 把所有匹配的内容插入到content元素的尾部 |
兄弟节点 | insertBefore(content) | 把所有匹配的内容插入到content元素的头部 |
2 节点替换
节点替换是指将选中的节点替换为指定的节点
语法 | 说明 |
replaceWith(content) | 将所有匹配的元素替换成指定的HTML或DOM元素 |
replaceAll(selector) | 用匹配的元素替换掉所有selector匹配到的元素 |
replaceWith()方法的参数是一个函数时，它的返回值类型必须是字符串类型，用于完成指定元素的替换操作。
3 节点删除
语法 | 说明 |
empty() | 清空元素的内容，但不删除元素本身 |
remove([expr]) | 清空元素的内容，并删除元素本身（可选参数expr用于筛选元素） |
detach([expr]) | 从DOM中删除所有匹配的元素（保留所有绑定的事件、附加的数据等） |
empty()方法仅能删除匹配元素的文本内容，而元素节点依然存在。remove()方法则可以同时删除匹配元素本身和文本内容。
4 节点复制
语法 | 说明 |
clone([false]) | 复制匹配的元素并且选中这些复制的副本，默认参数为false |
clone(true) | 参数设置为true时，复制元素的所有事件处理 |
开发中若在复制元素节点时，想要同时复制该节点的所有事件的处理，则可以将clone()方法的操作设置为true，否则节点复制时使用默认操作false即可。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
