js穿梭框点菜小案例

Welcome to 小案列

HTML部分

首先是样式搭建就不多说了

 <ul id="cai">
        <li>
            <h1>菜品</h1>
        </li>
        <Li>京酱肉丝</Li>
        <Li>小水肉片</Li>
        <Li>红烧鲤鱼</Li>
        <Li>油门小葱</Li>
        <Li>鱼香肉丝</Li>
    </ul>

    <button>&gt;</button>
    <button>&lt;-</button>

    <ul id="yi">
        <li>
            <h1>已选菜</h1>
        </li>
    </ul>

style

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .red {
            background-color: brown;
        }
 </style>

js代码部分

       获取标签

    let cais = document.querySelectorAll('#cai li')//获取的菜品下的标签

    let arr = []//点击后保存到数组

    let btn = document.querySelectorAll('button')//多个按钮啦

    let yi = document.querySelector('#yi')//选中菜品

    let cai=document.querySelector('#cai')//菜品

重要的来了

  for (let i = 1; i < cais.length; i++) {//遍历菜品名单，从1开始,因为所以科学道理
（索引0是h1标签不需要）

        cai[i].onclick = function () {

            if (this.classList.contains('red')) {//点击后判断点击的标签是否代有class的red类名
            
                this.classList.remove('red')//有了就删除
   
                arr.pop(this.innerHTML)//从数组中删除
                
            } else {
                //这个反之
                this.classList.add('red')

                arr.push(this.innerHTML)
                
            }
        }
    }


    btn[0].onclick = function () {//点击第一个进行穿梭
        
        for (var i = 0; i < arr.length; i++) {//遍历保存的数组

            let li = document.createElement('li')//创建相应的标签放入

            
            li.innerText = arr[i]

            yi.appendChild(li)//添加到页面

        }
        // 清空数组
        arr.length = 0
    }

//另一个按钮思路也是如此，好兄弟

点菜案列到结束，欢迎大佬来补全不足