ES6语法，Map、Set版自动轮播选项卡_es6 map遍历轮播-CSDN博客

本文链接：https://blog.csdn.net/weixin_45838680/article/details/107121893

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        input.active {
            background: red;
        }
        
        .outNode>div {
            width: 200px;
            height: 200px;
            background: #ccc;
            display: none;
        }
        
        .outNode>div:first-of-type {
            display: block;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        const $ = obj => [...document.querySelectorAll(obj)]; // 返回匹配选择器的所有元素集合（节点数组）
        const jsonDate = {
            'vlaueName': ['李万宇', '王艺蒙', '顼勋'],
            'innnerHtml': [
                '有钱了', '瘦了', '把作业写完了'
            ]
        };
        let Index = 0;
        // 标签模板  ` `  模板中的${}是es6自带的模板插值语法，和上面的$不是一会儿事 
        const createNode = json =>
            `<div class=outNode>
              ${json.vlaueName.map((x)=>`<input type=button value=${x}>`).join('')}
              ${json.innnerHtml.map((x)=>`
                <div>${x}</div>
                `).join('')}
            </div>`;
            
        document.body.innerHTML = createNode(jsonDate);
        let allInput = new Set($('input'));  // allInput为set类型
        let allDiv = new Set($('.outNode>div'));
        [...allInput][0].className = 'active';  //...展开后allInput变为去重数组类型
        [...allInput].forEach((item,i)=>{
          item['onclick']=()=>{
            [...allDiv].forEach(f=>f.style.display='none');
            [...allDiv][i].style.display = 'block';
            [...allInput].forEach(x=>x.className='');
            [...allInput][i].className = 'active';
          }
        });

        setInterval(()=>{
          Index++;
          (Index == [...allInput].length) && (Index=0);
          [...allInput].forEach(x=>x.className='');
          [...allInput][Index].className = 'active';
          [...allDiv].forEach(x=>x.style.display='none');
          [...allDiv][Index].style.display = 'block';
        },1000);
    </script>
</body>

</html>