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.validate表单验证插件使用详解
Jun 21 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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 404错误页面实现代码
2009/06/22 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
解析php5配置使用pdo
2013/07/03 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php session的锁和并发
2016/01/22 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python:socket传输大文件示例
2017/01/18 Python
python实现k-means聚类算法
2018/02/23 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python使用zip将list转为json的方法
2018/12/31 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
经典婚礼主持词
2014/03/13 职场文书
公益广告标语
2014/06/19 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书