jQuery实现穿梭框效果


Posted in jQuery onJanuary 19, 2021

本文实例为大家分享了jQuery实现穿梭框效果的具体代码,供大家参考,具体内容如下

简介:今天给大家带来穿梭框的实现

布局的实现

<div id="box">
  <div id="boxleft">
   <ul id="left_ul">

   </ul>
  </div>
  <div id="boxbtn">
   <button id="btn_right">>>>></button>
   <button id="btn_left">
    <<<< </button>
  </div>
  <div id="boxright">
   <ul id="right_ul">

   </ul>
  </div>
</div>

布局的样式

<style>
  * {
   margin: 0 auto;
   padding: 0;
   list-style: none;
  }

  #box {
   width: 500px;
   display: flex;
   justify-content: space-around;
   margin-top: 20px;
  }

  #boxright {
   width: 200px;
   height: 500px;
   border: 1px solid darkcyan;
  }

  #boxleft {
   width: 200px;
   height: 500px;
   border: 1px solid darkcyan;
  }

  #boxbtn {
   margin: auto;
  }

  #boxbtn button {
   width: 50px;
   height: 200ox;
   margin-top: 10px;
   display: flex;
   background: deepskyblue;
   cursor: pointer;
   color: white;
  }

  ul li {
   height: 30px;
   line-height: 30px;
   margin-bottom: 2px;
   text-align: center;
   background: darkgray;
  }

  form {
   text-align: center;
  }

  .active {
   color: white;
   background: darkseagreen;
  }
</style>

代码实现

<script>
  let arr = [
   { "id": 1, "name": "zhang", "check": false },
   { "id": 2, "name": "liu", "check": false },
   { "id": 3, "name": "guan", "check": false },
   { "id": 4, "name": "zhao", "check": true },
   { "id": 5, "name": "ao", "check": true }
  ];

  $("#add").click(function () {
   var name = $("#name").val();
   arr.push({ "name": name });
   showUL(arr);
  })
  $(function () {
   showUL(arr);
  })
  function showUL(arr) {
   var leftstr = "";
   var rightstr = "";
   for(let i in arr) {
    let { id, name, check } = arr[i];
    if (check) {
     rightstr += `
      <li _id="${id}">${name}</li>
    `
    } else {
     leftstr += `
      <li _id="${id}">${name}</li>
    `
    }

   }
   $("#left_ul").html(leftstr);
   $("#right_ul").html(rightstr);
  }


  $("#left_ul").on("click", "li", function () {
   let index = arr.findIndex((v) => {
    return v.id == $(this).attr("_id");
   })

   if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    arr[index].check = false;
   } else {
    $(this).addClass('active');
    arr[index].check = true;
   }
  });
  $("#right_ul").on("click", "li", function () {
   let index = arr.findIndex((v) => {
    return v.id == $(this).attr("_id");
   })

   if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    arr[index].check = true;
   } else {
    $(this).addClass('active');
    arr[index].check = false;
   }
  });
  $("#btn_right").click(function () {
   if ($("#left_ul .active").length == 0) return false;

   showUL(arr);
  })
  $("#btn_left").click(function () {
   if ($("#right_ul .active").length == 0) return false;
  
   showUL(arr);
  })  
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery冲突问题解决方法
Jan 19 #jQuery
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
jQuery实现全选按钮
Jan 01 #jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
You might like
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
express.js中间件说明详解
2019/03/19 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python最长公共子串算法实例
2015/03/07 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
用Python实现数据的透视表的方法
2018/11/16 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python之指数与E记法的区别详解
2019/11/21 Python
如何用python免费看美剧
2020/08/11 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
广告词串烧
2014/03/19 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang