JavaScript實現索引標籤功能(程式導向與物件導向)

2022-02-11 19:10:54

程式導向

注意：

ul>li 標籤屬性中的index屬性值是串聯起ol>li與ul>li的關鍵，通過呼叫相同索引下標的陣列中的不同屬性的屬性值達到切換內容的效果。

通過事件委託找到對應的ul>li 進行css屬性的刪除與新增做到背景顏色改變和內容改變的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
 
        ul,ol,li{
            list-style: none;
        }
 
        .box{
            width: 800px;
            height: 600px;
            border: 3px solid #000;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
 
        }
 
        .box > ul{
            width: 100%;
            height: 100px;
            display: flex;
  
        }
 
        .box > ul >li{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            background: pink;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            color: #fff;
 
        }
 
        .box > ul >li:last-child{
            border-right: none;
        }
 
        .box > ul >li.active{
            color: red;
            text-decoration: underline;
            background: orange;
        }
 
 
        .box > ol {
            flex: 1;
            position: relative;
 
        }
 
        .box > ol >li{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            background: cyan;
            display: none;
            color: #fff;
        }
 
        .box > ol > li.active{
            display: flex;
        }
 
    </style>
</head>
<body>
 
    <div class="box"></div>
   
    <script>
        // 程式導向 
 
        // 定義陣列 模擬資料庫資料
        var arr1 = [
            { id:1 , ulLi:'精選' , olLi:'精選內容' },
            { id:2 , ulLi:'美食' , olLi:'美食內容' },
            { id:3 , ulLi:'百貨' , olLi:'百貨內容' },
            { id:4 , ulLi:'個護' , olLi:'個護內容' },
        ];
 
 
        // 獲取標籤物件 
        const oBox = document.querySelector('.box');
 
        // 定義全域性變數儲存資料
        let oUlLis ;
        let oOlLis ;
 
        // 呼叫函數 動態渲染生成頁面
        setPage();
 
        // 呼叫函數 新增事件
        setEvent();
 
        // 定義函數1 動態生成頁面
        function setPage(){
            // 建立固定的標籤節點 ul ol 
            const oUl = document.createElement('ul');
            const oOl = document.createElement('ol');
 
            // 定義字串 儲存動態渲染生成的ul>li ol>li
            let ulLiStr = '';
            let olLiStr = '';
 
            // 迴圈遍歷陣列 根據陣列中的內容動態渲染生成li標籤
            arr1.forEach( function(item,key){
                // item 是 陣列單元儲存的資料 也就是 儲存資料的物件
                // key 是 陣列單元的索引下標
 
                // 第一個ul>li 有 class,active樣式
                ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;
 
                // 第一個ol>li 有 class,active樣式
                olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
            });
 
            console.log( ulLiStr );
            console.log( olLiStr );
 
            // 將字串寫入ul ol 標籤
            oUl.innerHTML = ulLiStr ;
            oOl.innerHTML = olLiStr ;
 
            // 將 ul ol 標籤 寫入 div標籤中
            oBox.appendChild( oUl );
            oBox.appendChild( oOl );
 
            // 獲取所有的ul>li
            oUlLis = oUl.querySelectorAll('li');
 
            // 獲取所有的ol>li
            oOlLis = oOl.querySelectorAll('li');
 
        }
 
        // 定義函數2 給標籤新增事件
        // 引數 繫結事件的事件型別 可以是click mouseover 預設值是 mouseover
        function setEvent( event = 'mouseover' ){
            // 給 父級標籤 新增 事件 通過事件委託完成效果
            oBox.addEventListener( event , function(e){
                if( e.target.getAttribute('name') === 'ulLi' ){
                    // 清除所有 ul>li 的 class,active
                    oUlLis.forEach( function(item , key){
                        // item 是 ul>li中 li標籤物件
                        // key 是 ul>li中 li標籤物件的索引下標
                        // 同時也是 ol>li中 li標籤物件的索引下標 
                        item.classList.remove('active');
 
                        // key是ul>li的索引下標 也就是ol>li的索引下標
                        // oOlLs陣列可以通過索引下標 獲取到 ol>li標籤物件
                        oOlLis[key].classList.remove('active');
                    })
 
                    // 給觸發事件的ul>li標籤新增class,active
                    e.target.classList.add('active');
 
                    // 給觸發事件的ul>li標籤 對應的ol>li標籤新增class,active
                    // 也就是和 e.target 觸發事件標籤 索引下標相同的 ol>li標籤
                    // 也就是獲取 e.target標籤 index屬性的屬性值
                    // 標籤屬性的屬性值 都是 字串型別 需要轉化為數值型別
                    oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
 
                }
            })
        }
 
    </script>
 
</body>
</html>

物件導向

注意：

之前呼叫的是變數，現在呼叫的是物件中儲存的屬性與屬性值。
確保 this 的指向是物件，當事件繫結 forEach 定時器延時器... 中 this指向會改變
修改this指向的方法：提前使用變數儲存原始this指向，使用變數替代 this關鍵詞

程式碼展示：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        ul,
        ol,
        li {
            list-style: none;
        }
 
        .box {
            width: 800px;
            height: 600px;
            border: 3px solid #000;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
 
        }
 
        .box>ul {
            width: 100%;
            height: 100px;
            display: flex;
 
        }
 
        .box>ul>li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            background: pink;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            color: #fff;
 
        }
 
        .box>ul>li:last-child {
            border-right: none;
        }
 
        .box>ul>li.active {
            color: red;
            text-decoration: underline;
            background: orange;
        }
 
 
        .box>ol {
            flex: 1;
            position: relative;
 
        }
 
        .box>ol>li {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            background: cyan;
            display: none;
            color: #fff;
        }
 
        .box>ol>li.active {
            display: flex;
        }
    </style>
</head>
 
<body>
 
    <div class="box"></div>
    <!-- 匯入外部檔案 -->
    <script src="./tab.js"></script>
    <script>
        // 定義陣列 模擬資料庫資料
        const arr1 = [
            { id: 1, ulLi: '精選', olLi: '精選內容' },
            { id: 2, ulLi: '美食', olLi: '美食內容' },
            { id: 3, ulLi: '百貨', olLi: '百貨內容' },
            { id: 4, ulLi: '個護', olLi: '個護內容' },
        ];
 
 
        // 獲取標籤物件 
        const oBox = document.querySelector('.box');
 
        
        // ES6 建構函式 通過建構函式生成範例化物件
        const obj = new CreateTabObj(oBox, arr1);
        // 呼叫動態生成函數
        obj.setPage();
        // 呼叫點選事件函數，引數為事件型別
        obj.setEvent("click");
 
    </script>
 
</body>
 
</html>

外連建構函式程式碼：

// 在外部檔案中定義建構函式
class CreateTabObj{
    // 構造器 定義屬性和屬性值
    // element  建立生成索引標籤的標籤物件
    // msgArr   生成選項開內容的陣列
    constructor( element , msgArr ){
        this.ele = element ;
        this.arr = msgArr ;
 
        // 定義屬性 儲存 程式導向中 需要的全域性變數
        this.oUlLis;
        this.oOlLis;
    }
 
    // 構造器外定義函數方法
 
    // 函數1 動態生成頁面
    setPage(){
        // 建立固定的標籤節點 ul ol 
        const oUl = document.createElement('ul');
        const oOl = document.createElement('ol');
 
        // 定義字串 儲存動態渲染生成的ul>li ol>li
        let ulLiStr = '';
        let olLiStr = '';
 
        // 迴圈遍歷陣列 根據陣列中的內容動態渲染生成li標籤
        
        // 之前是 直接呼叫 變數 arr1 中 儲存的資料 
        // 現在是 呼叫 範例化物件中arr屬性儲存的資料
        // arr1 ---> this.arr
        this.arr.forEach( function(item,key){
            // item 是 陣列單元儲存的資料 也就是 儲存資料的物件
            // key 是 陣列單元的索引下標
 
            // 第一個ul>li 有 class,active樣式
            ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;
 
            // 第一個ol>li 有 class,active樣式
            olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
        });
 
 
        // 將字串寫入ul ol 標籤
        oUl.innerHTML = ulLiStr ;
        oOl.innerHTML = olLiStr ;
 
        // 將 ul ol 標籤 寫入 div標籤中
 
        // 標籤物件 ---> this.ele
        this.ele.appendChild( oUl );
        this.ele.appendChild( oOl );
 
        // 獲取所有的ul>li
        this.oUlLis = oUl.querySelectorAll('li');
 
        // 獲取所有的ol>li
        this.oOlLis = oOl.querySelectorAll('li');
    }
 
    // 函數2 新增事件
    // 設定引數 儲存事件型別 可以是 click 可以是 mouseover 預設值是 mouseover
    setEvent( event = 'mouseover' ){
        // class 建構函式中 this指向 預設是 物件 
        console.log( this);
 
        // 給 父級標籤 新增 事件 通過事件委託完成效果
 
        // 提前定義一個變數 儲存 原始this指向
        const _this = this ;
 
        // 事件繫結 中 this指向改變 
 
        this.ele.addEventListener( event , function(e){
            // 事件繫結中 this指向 預設是 事件源 
            // 不再是 物件 
            // 也就是在 事件繫結中 this.屬性 不能 正確呼叫物件中的資料 
 
            if( e.target.getAttribute('name') === 'ulLi' ){
 
                // 清除所有 ul>li 的 class,active
 
                
                _this.oUlLis.forEach( function(item , key) {
 
                    // 給 ul>li 清除 class,active
                    item.classList.remove('active');
                    // 給 索引下標相同的 ol>li 清除 class,active
                    _this.oOlLis[key].classList.remove('active');
                })
 
                // 給 點選的 ul>li 新增 class,active
                e.target.classList.add('active');
 
                // 給 點選的 ul>li 索引下標 相同的 ol>li 新增 class,active
                _this.oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
 
            }
        })
    }
}

執行結果：

到此這篇關於JavaScript實現索引標籤功能(程式導向與物件導向)的文章就介紹到這了,更多相關JavaScript 索引標籤內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript實現索引標籤功能(程式導向與物件導向)

目錄

程式導向

物件導向

熱門文章