iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

JS 學習歷程系列 第 22

嘿嘿!厲害啦! - 六角學院 JS 最終作業 (五)

好開心昨天己經做出主要內容頁,今天想來做個按鈕分頁,所以主要目標是第六塊:

第六塊的 HTML 也超級簡單,只要給個 div 其它什麼都不用,是不是很嗨桑:

<!-- 第六塊 -->
<div class="btncontent">
</div>

單欄我們也要來 CSS 一下:

.btncontent{
    display: flex;
    justify-content: center;
}
.btncontent span{
    border:1px solid;
    width:50px;
    line-height:50px;
    text-align: center;
    margin:10px;
    font-size:24px;
}
.btncontent span:hover{
    background:#757575;
    color:white;
}

JS 好複雜的,我們今天先來依內容多寡產生按鈕數量吧,按鈕我想就繼續寫在 updateTitle 的 functaion 裡面吧,當 title 變動,會去撈出 allData 的資料:

  1. 首先,我們要先設一個空陣列,把所有 select 出來的資料都丟到這個陣列裡
var selectAry =[];

for (var i = 0; i < allData.length; i++) {
    if (select == allData[i].Zone) {
        selectAry.push(allData[i]);
    }
}
  1. 來算出內容頁有幾顆按鈕吧
var page = document.querySelector('.btncontent');
var btnNum = Math.ceil(selectAry.length / 6);
  1. 算出幾顆按鈕後,我們要把它帶到字串裡面:
var pageStr = '';

for (var i = 0; i < btnNum; i++) {
    pageStr += `<span>${i + 1}</span>`;
}
page.innerHTML = pageStr;

好的,突然發現自己要去修其他東西,今天就先到這裡了(溜~


上一篇
嘿嘿!厲害啦! - 六角學院 JS 最終作業 (四)
下一篇
嘿嘿!厲害啦! - 六角學院 JS 最終作業 (六)
系列文
JS 學習歷程30

尚未有邦友留言

立即登入留言