JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?

更新時(shí)間：2022年02月11日 15:27:25 作者：大聰明碼農(nóng)徐

本文主要介紹了JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

面向過(guò)程

注意：

ul>li 標(biāo)簽屬性中的index屬性值是串聯(lián)起ol>li與ul>li的關(guān)鍵，通過(guò)調(diào)用相同索引下標(biāo)的數(shù)組中的不同屬性的屬性值達(dá)到切換內(nèi)容的效果。

通過(guò)事件委托找到對(duì)應(yīng)的ul>li 進(jìn)行css屬性的刪除與新增做到背景顏色改變和內(nèi)容改變的效果。

<!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>
        // 面向過(guò)程 
 
        // 定義數(shù)組 模擬數(shù)據(jù)庫(kù)數(shù)據(jù)
        var arr1 = [
            { id:1 , ulLi:'精選' , olLi:'精選內(nèi)容' },
            { id:2 , ulLi:'美食' , olLi:'美食內(nèi)容' },
            { id:3 , ulLi:'百貨' , olLi:'百貨內(nèi)容' },
            { id:4 , ulLi:'個(gè)護(hù)' , olLi:'個(gè)護(hù)內(nèi)容' },
        ];
 
 
        // 獲取標(biāo)簽對(duì)象 
        const oBox = document.querySelector('.box');
 
        // 定義全局變量?jī)?chǔ)存數(shù)據(jù)
        let oUlLis ;
        let oOlLis ;
 
        // 調(diào)用函數(shù) 動(dòng)態(tài)渲染生成頁(yè)面
        setPage();
 
        // 調(diào)用函數(shù) 添加事件
        setEvent();
 
        // 定義函數(shù)1 動(dòng)態(tài)生成頁(yè)面
        function setPage(){
            // 創(chuàng)建固定的標(biāo)簽節(jié)點(diǎn) ul ol 
            const oUl = document.createElement('ul');
            const oOl = document.createElement('ol');
 
            // 定義字符串 存儲(chǔ)動(dòng)態(tài)渲染生成的ul>li ol>li
            let ulLiStr = '';
            let olLiStr = '';
 
            // 循環(huán)遍歷數(shù)組 根據(jù)數(shù)組中的內(nèi)容動(dòng)態(tài)渲染生成li標(biāo)簽
            arr1.forEach( function(item,key){
                // item 是 數(shù)組單元存儲(chǔ)的數(shù)據(jù) 也就是 存儲(chǔ)數(shù)據(jù)的對(duì)象
                // key 是 數(shù)組單元的索引下標(biāo)
 
                // 第一個(gè)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>` ;
 
                // 第一個(gè)ol>li 有 class,active樣式
                olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
            });
 
            console.log( ulLiStr );
            console.log( olLiStr );
 
            // 將字符串寫(xiě)入ul ol 標(biāo)簽
            oUl.innerHTML = ulLiStr ;
            oOl.innerHTML = olLiStr ;
 
            // 將 ul ol 標(biāo)簽 寫(xiě)入 div標(biāo)簽中
            oBox.appendChild( oUl );
            oBox.appendChild( oOl );
 
            // 獲取所有的ul>li
            oUlLis = oUl.querySelectorAll('li');
 
            // 獲取所有的ol>li
            oOlLis = oOl.querySelectorAll('li');
 
        }
 
        // 定義函數(shù)2 給標(biāo)簽添加事件
        // 參數(shù) 綁定事件的事件類(lèi)型 可以是click mouseover 默認(rèn)值是 mouseover
        function setEvent( event = 'mouseover' ){
            // 給 父級(jí)標(biāo)簽 添加 事件 通過(guò)事件委托完成效果
            oBox.addEventListener( event , function(e){
                if( e.target.getAttribute('name') === 'ulLi' ){
                    // 清除所有 ul>li 的 class,active
                    oUlLis.forEach( function(item , key){
                        // item 是 ul>li中 li標(biāo)簽對(duì)象
                        // key 是 ul>li中 li標(biāo)簽對(duì)象的索引下標(biāo)
                        // 同時(shí)也是 ol>li中 li標(biāo)簽對(duì)象的索引下標(biāo) 
                        item.classList.remove('active');
 
                        // key是ul>li的索引下標(biāo) 也就是ol>li的索引下標(biāo)
                        // oOlLs數(shù)組可以通過(guò)索引下標(biāo) 獲取到 ol>li標(biāo)簽對(duì)象
                        oOlLis[key].classList.remove('active');
                    })
 
                    // 給觸發(fā)事件的ul>li標(biāo)簽添加class,active
                    e.target.classList.add('active');
 
                    // 給觸發(fā)事件的ul>li標(biāo)簽 對(duì)應(yīng)的ol>li標(biāo)簽添加class,active
                    // 也就是和 e.target 觸發(fā)事件標(biāo)簽 索引下標(biāo)相同的 ol>li標(biāo)簽
                    // 也就是獲取 e.target標(biāo)簽 index屬性的屬性值
                    // 標(biāo)簽屬性的屬性值 都是 字符串類(lèi)型 需要轉(zhuǎn)化為數(shù)值類(lèi)型
                    oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
 
                }
            })
        }
 
    </script>
 
</body>
</html>

面向?qū)ο?nbsp;

注意：

之前調(diào)用的是變量，現(xiàn)在調(diào)用的是對(duì)象中存儲(chǔ)的屬性與屬性值。
確保 this 的指向是對(duì)象，當(dāng)事件綁定 forEach 定時(shí)器延時(shí)器... 中 this指向會(huì)改變
修改this指向的方法：提前使用變量存儲(chǔ) 原始this指向，使用變量替代 this關(guān)鍵詞

代碼展示：

<!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>
    <!-- 導(dǎo)入外部文件 -->
    <script src="./tab.js"></script>
    <script>
        // 定義數(shù)組 模擬數(shù)據(jù)庫(kù)數(shù)據(jù)
        const arr1 = [
            { id: 1, ulLi: '精選', olLi: '精選內(nèi)容' },
            { id: 2, ulLi: '美食', olLi: '美食內(nèi)容' },
            { id: 3, ulLi: '百貨', olLi: '百貨內(nèi)容' },
            { id: 4, ulLi: '個(gè)護(hù)', olLi: '個(gè)護(hù)內(nèi)容' },
        ];
 
 
        // 獲取標(biāo)簽對(duì)象 
        const oBox = document.querySelector('.box');
 
        
        // ES6 構(gòu)造函數(shù) 通過(guò)構(gòu)造函數(shù)生成實(shí)例化對(duì)象
        const obj = new CreateTabObj(oBox, arr1);
        // 調(diào)用動(dòng)態(tài)生成函數(shù)
        obj.setPage();
        // 調(diào)用點(diǎn)擊事件函數(shù)，參數(shù)為事件類(lèi)型
        obj.setEvent("click");
 
    </script>
 
</body>
 
</html>

外鏈構(gòu)造函數(shù)代碼：

// 在外部文件中定義構(gòu)造函數(shù)
class CreateTabObj{
    // 構(gòu)造器 定義屬性和屬性值
    // element  創(chuàng)建生成選項(xiàng)卡的標(biāo)簽對(duì)象
    // msgArr   生成選項(xiàng)開(kāi)內(nèi)容的數(shù)組
    constructor( element , msgArr ){
        this.ele = element ;
        this.arr = msgArr ;
 
        // 定義屬性 存儲(chǔ) 面向過(guò)程中 需要的全局變量
        this.oUlLis;
        this.oOlLis;
    }
 
    // 構(gòu)造器外定義函數(shù)方法
 
    // 函數(shù)1 動(dòng)態(tài)生成頁(yè)面
    setPage(){
        // 創(chuàng)建固定的標(biāo)簽節(jié)點(diǎn) ul ol 
        const oUl = document.createElement('ul');
        const oOl = document.createElement('ol');
 
        // 定義字符串 存儲(chǔ)動(dòng)態(tài)渲染生成的ul>li ol>li
        let ulLiStr = '';
        let olLiStr = '';
 
        // 循環(huán)遍歷數(shù)組 根據(jù)數(shù)組中的內(nèi)容動(dòng)態(tài)渲染生成li標(biāo)簽
        
        // 之前是 直接調(diào)用 變量 arr1 中 存儲(chǔ)的數(shù)據(jù) 
        // 現(xiàn)在是 調(diào)用 實(shí)例化對(duì)象中arr屬性存儲(chǔ)的數(shù)據(jù)
        // arr1 ---> this.arr
        this.arr.forEach( function(item,key){
            // item 是 數(shù)組單元存儲(chǔ)的數(shù)據(jù) 也就是 存儲(chǔ)數(shù)據(jù)的對(duì)象
            // key 是 數(shù)組單元的索引下標(biāo)
 
            // 第一個(gè)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>` ;
 
            // 第一個(gè)ol>li 有 class,active樣式
            olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
        });
 
 
        // 將字符串寫(xiě)入ul ol 標(biāo)簽
        oUl.innerHTML = ulLiStr ;
        oOl.innerHTML = olLiStr ;
 
        // 將 ul ol 標(biāo)簽 寫(xiě)入 div標(biāo)簽中
 
        // 標(biāo)簽對(duì)象 ---> this.ele
        this.ele.appendChild( oUl );
        this.ele.appendChild( oOl );
 
        // 獲取所有的ul>li
        this.oUlLis = oUl.querySelectorAll('li');
 
        // 獲取所有的ol>li
        this.oOlLis = oOl.querySelectorAll('li');
    }
 
    // 函數(shù)2 添加事件
    // 設(shè)定參數(shù) 存儲(chǔ)事件類(lèi)型 可以是 click 可以是 mouseover 默認(rèn)值是 mouseover
    setEvent( event = 'mouseover' ){
        // class 構(gòu)造函數(shù)中 this指向 默認(rèn)是 對(duì)象 
        console.log( this);
 
        // 給 父級(jí)標(biāo)簽 添加 事件 通過(guò)事件委托完成效果
 
        // 提前定義一個(gè)變量 存儲(chǔ) 原始this指向
        const _this = this ;
 
        // 事件綁定 中 this指向改變 
 
        this.ele.addEventListener( event , function(e){
            // 事件綁定中 this指向 默認(rèn)是 事件源 
            // 不再是 對(duì)象 
            // 也就是在 事件綁定中 this.屬性 不能 正確調(diào)用對(duì)象中的數(shù)據(jù) 
 
            if( e.target.getAttribute('name') === 'ulLi' ){
 
                // 清除所有 ul>li 的 class,active
 
                
                _this.oUlLis.forEach( function(item , key) {
 
                    // 給 ul>li 清除 class,active
                    item.classList.remove('active');
                    // 給 索引下標(biāo)相同的 ol>li 清除 class,active
                    _this.oOlLis[key].classList.remove('active');
                })
 
                // 給 點(diǎn)擊的 ul>li 添加 class,active
                e.target.classList.add('active');
 
                // 給 點(diǎn)擊的 ul>li 索引下標(biāo) 相同的 ol>li 添加 class,active
                _this.oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
 
            }
        })
    }
}

運(yùn)行結(jié)果：

到此這篇關(guān)于JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?的文章就介紹到這了,更多相關(guān)JavaScript 選項(xiàng)卡內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: