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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 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生成缩略图的类代码
2008/10/02 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php的curl封装类用法实例
2014/11/07 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Python 自动化表单提交实例代码
2017/06/08 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python读取csv文件实例解析
2019/12/30 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
探矿工程师自荐信
2014/01/24 职场文书
代理协议书范本
2014/04/22 职场文书
土地转让协议书
2014/09/27 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
七一晚会主持词
2015/06/29 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android