【筆記】前端使用 jQuery 進行雙切換區塊資訊

最近幫前端寫的小功能，筆記一下

使用 jQuery

Script

        var json = {
            'type1': {
                'a': { 'cardTitle': '簡單開店', 'cardImg': 'images/01.png', 'cardHead': '內標1', 'cardContent': '內容1' },
                'b': { 'cardTitle': '零成本', 'cardImg': 'images/02.png', 'cardHead': '內標2', 'cardContent': '內容2' },
                'c': { 'cardTitle': '完美後台', 'cardImg': 'images/03.png', 'cardHead': '內標3', 'cardContent': '內容3' },
                'd': { 'cardTitle': '最佳體驗', 'cardImg': 'images/04.png', 'cardHead': '內標4', 'cardContent': '內容4' },
                'e': { 'cardTitle': '收款快速', 'cardImg': 'images/05.png', 'cardHead': '內標5', 'cardContent': '內容5' },
                'f': { 'cardTitle': 'SEO優化', 'cardImg': 'images/06.png', 'cardHead': '內標5', 'cardContent': '內容6' },
            },
            'type2': {
                'a': { 'cardTitle': '促銷模組', 'cardImg': 'images/01.svg', 'cardHead': '內標', 'cardContent': '內容' },
                'b': { 'cardTitle': '購物車', 'cardImg': 'images/02.svg', 'cardHead': '內標', 'cardContent': '內容' },
                'c': { 'cardTitle': '免註冊', 'cardImg': 'images/03.svg', 'cardHead': '內標', 'cardContent': '內容' },
                'd': { 'cardTitle': '規格彈性', 'cardImg': 'images/04.svg', 'cardHead': '內標', 'cardContent': '內容' },
                'e': { 'cardTitle': '金物流完整', 'cardImg': 'images/05.svg', 'cardHead': '內標', 'cardContent': '內容' },
                'f': { 'cardTitle': '統計串接', 'cardImg': 'images/06.svg', 'cardHead': '內標', 'cardContent': '內容' },
            },
        }
        var selectType = json.type1;
        function switchCardType(name) {
            selectType = json[name];

            let newCardTitle = ''
            Object.keys(selectType).forEach(function (key) {
                newCardTitle += `<h2 onclick="switchCardInfo('${key}')">${selectType[key].cardTitle}</h2>`;
            });
            $('#cardTitle').html(newCardTitle);

            switchCardInfo('a');
        }
        function switchCardInfo(id) {
            $('#cardImg').attr("src", selectType[id].cardImg);
            $('#cardHead').text(selectType[id].cardHead);
            $('#cardContent').text(selectType[id].cardContent);
        }

HTML

<header>
<ul class="nav-ul">
<li><a href="#intro-special" onclick="switchCardType('type1')">平台特色</a></li>
<li><a href="#intro-special" onclick="switchCardType('type2')">功能介紹</a></li>
</ul>
</header>
<main>
<div class="row" id="intro-special">
<div class="col-4">
<div id="cardTitle">
<h2 onclick="switchCardInfo('a')">簡單開店</h2>
<h2 onclick="switchCardInfo('b')">零成本</h2>
<h2 onclick="switchCardInfo('c')">完美後台</h2>
<h2 onclick="switchCardInfo('d')">最佳體驗</h2>
<h2 onclick="switchCardInfo('e')">收款快速</h2>
<h2 onclick="switchCardInfo('f')">SEO優化</h2>
</div>
</div>
<div class="col-3">
<img id="cardImg" src="images/01.png">
<h2 id="cardHead">內標1</h2>
<p id="cardContent">內容1</p>
</div>
</div>
</main>

展開文章／收合

相關