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插件
Mar 29 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jquery uaMatch源代码
2011/02/14 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
社团活动策划书范文
2014/01/09 职场文书
企业挂职心得体会
2014/09/10 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
Mysql数据库group by原理详解
2022/07/07 MySQL