js學習之 promise 練習demo 自動選項卡

關於 querySelectorAll 方法的解釋

利用標籤模板來實現 自動選項卡的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=a, initial-scale=1.0"> -->
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .outNode>div{
            width: 200px;
            height: 200px;
            background-color: pink;
            color:darkred;
            border:solid 1px black;
            display: none;
        }
        .outNode>div:first-of-type{
            display: block;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        // $ 函數名 
        // obj 函數參數
        // ... 擴展運算符
        // 以數組的形式,把我選中的東西全部選中
        // querySelectorAll 選擇符合 obj 這個參數的元素數組
        $=obj=>[...document.querySelectorAll(obj)];

        // json數據
        const jsonData={
            'valueName':['選項1','選項2','選項3'],
            'innerHtml':['內容層1','內容層22','內容層333']
        }

        // 遍歷json.valueName.map
        // 根據jsonData 來創建節點
        // <div class="outNode"><input type=button value='選項1'></div>
        const createNode=json=>`<div class="outNode">
            ${json.valueName.map((x)=>`<input type=button value=${x}>`).join('')}
            ${json.innerHtml.map((x)=>`<div>${x}</div>`).join('')}
            </div>`;

        // 調用創建節點的method
        document.body.innerHTML = createNode(jsonData);

        // 點擊以後,去掉所有的div
        let allInput = new Set($('input'));
        let allDiv = new Set($('.outNode>div'));

        // 給三個按鈕綁定 click 事件 
        [...allInput].forEach((x,y)=>{
            x['onclick']=()=>{
                //alert(123);
                // 遍歷三個div 全部隱藏
                [...allDiv].forEach((ddiv)=>{
                    ddiv.style.display="none";
                });
                // 只顯示該切換到的那個div 
                [...allDiv][y].style.display='block';
            }
        })
    
    </script>
    
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章