• 售前

  • 售后

热门帖子
入门百科

jQuery实现穿梭框效果

[复制链接]
天褐女孩涛 显示全部楼层 发表于 2021-10-25 19:22:23 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了jQuery实现穿梭框结果的具体代码,供大家参考,具体内容如下
简介:本日给大家带来穿梭框的实现

布局的实现
  1. <div id="box">
  2.   <div id="boxleft">
  3.    <ul id="left_ul">
  4.    </ul>
  5.   </div>
  6.   <div id="boxbtn">
  7.    <button id="btn_right">>>>></button>
  8.    <button id="btn_left">
  9.     <<<< </button>
  10.   </div>
  11.   <div id="boxright">
  12.    <ul id="right_ul">
  13.    </ul>
  14.   </div>
  15. </div>
复制代码
布局的样式
  1. <style>
  2.   * {
  3.    margin: 0 auto;
  4.    padding: 0;
  5.    list-style: none;
  6.   }
  7.   #box {
  8.    width: 500px;
  9.    display: flex;
  10.    justify-content: space-around;
  11.    margin-top: 20px;
  12.   }
  13.   #boxright {
  14.    width: 200px;
  15.    height: 500px;
  16.    border: 1px solid darkcyan;
  17.   }
  18.   #boxleft {
  19.    width: 200px;
  20.    height: 500px;
  21.    border: 1px solid darkcyan;
  22.   }
  23.   #boxbtn {
  24.    margin: auto;
  25.   }
  26.   #boxbtn button {
  27.    width: 50px;
  28.    height: 200ox;
  29.    margin-top: 10px;
  30.    display: flex;
  31.    background: deepskyblue;
  32.    cursor: pointer;
  33.    color: white;
  34.   }
  35.   ul li {
  36.    height: 30px;
  37.    line-height: 30px;
  38.    margin-bottom: 2px;
  39.    text-align: center;
  40.    background: darkgray;
  41.   }
  42.   form {
  43.    text-align: center;
  44.   }
  45.   .active {
  46.    color: white;
  47.    background: darkseagreen;
  48.   }
  49. </style>
复制代码
代码实现
  1. <script>
  2.   let arr = [
  3.    { "id": 1, "name": "zhang", "check": false },
  4.    { "id": 2, "name": "liu", "check": false },
  5.    { "id": 3, "name": "guan", "check": false },
  6.    { "id": 4, "name": "zhao", "check": true },
  7.    { "id": 5, "name": "ao", "check": true }
  8.   ];
  9.   $("#add").click(function () {
  10.    var name = $("#name").val();
  11.    arr.push({ "name": name });
  12.    showUL(arr);
  13.   })
  14.   $(function () {
  15.    showUL(arr);
  16.   })
  17.   function showUL(arr) {
  18.    var leftstr = "";
  19.    var rightstr = "";
  20.    for(let i in arr) {
  21.     let { id, name, check } = arr[i];
  22.     if (check) {
  23.      rightstr += `
  24.       <li _id="${id}">${name}</li>
  25.     `
  26.     } else {
  27.      leftstr += `
  28.       <li _id="${id}">${name}</li>
  29.     `
  30.     }
  31.    }
  32.    $("#left_ul").html(leftstr);
  33.    $("#right_ul").html(rightstr);
  34.   }
  35.   $("#left_ul").on("click", "li", function () {
  36.    let index = arr.findIndex((v) => {
  37.     return v.id == $(this).attr("_id");
  38.    })
  39.    if ($(this).hasClass('active')) {
  40.     $(this).removeClass('active');
  41.     arr[index].check = false;
  42.    } else {
  43.     $(this).addClass('active');
  44.     arr[index].check = true;
  45.    }
  46.   });
  47.   $("#right_ul").on("click", "li", function () {
  48.    let index = arr.findIndex((v) => {
  49.     return v.id == $(this).attr("_id");
  50.    })
  51.    if ($(this).hasClass('active')) {
  52.     $(this).removeClass('active');
  53.     arr[index].check = true;
  54.    } else {
  55.     $(this).addClass('active');
  56.     arr[index].check = false;
  57.    }
  58.   });
  59.   $("#btn_right").click(function () {
  60.    if ($("#left_ul .active").length == 0) return false;
  61.    showUL(arr);
  62.   })
  63.   $("#btn_left").click(function () {
  64.    if ($("#right_ul .active").length == 0) return false;
  65.   
  66.    showUL(arr);
  67.   })  
  68. </script>
复制代码
以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持草根技能分享。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作