iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
0
Modern Web

JS 學習歷程系列 第 23

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

昨天己經依照內容量做出相對的按鈕金歡喜,今天來把按鈕加入監聽「點擊」功能,就可以換頁了,天呀好棒棒:

繼續在 updateTitle 的 function 下來寫下對每顆按鈕的監聽:

//首先用 querySelectorAll 把每顆按鈕都選到:
var btn = document.querySelectorAll('.btncontent span');

//querySelectorAll 選出的按鈕是以陣列形式呈現,所以我們可以來個 for 迴圈一一監聽它們:
for (var i = 0; i < btn.length; i++) {
    //監聽按鈕,每次被點擊就會啟動 updateContent 這個 functaion 
    btn[i].addEventListener('click', updateContent.bind(this, i + 1, selectAry));
}

然後啊!然後啊!稍早之前,我們啟動 updateContent 這個 function 是選擇完上面區域之後才會啟動,但現在情況改變了(食指搖搖),我們會啟動 updateContent 是因為按了按鈕,所以原本的監聽我們要把它碼掉:

//你沒有用了~滾!
//option.addEventListener('change', updateContent);

接著 updateContent 我們現在要來改寫,總共有三個地方要改:

  1. 原來的 updateContent 後面綁的參數為 e,現在要改為綁 (page,data) 這二個參數,變為:
function updateContent(page,data)
  1. 原本的 var select = e.target.value 也應該要刪掉

  2. 底下替換的內容原本為${alldata[i]}的部分全都變成{data[i]}

  3. for 迴圈裡的判斷應該也要變動的,但是我們稍後再進行變更:

緊接下來我們在 updateContent 的判斷式下加入一些程式碼,讓它能順利換頁:

var items = 6;
var dataIndexStart = (page - 1) * 6;
var dateIndexEnd = items * page

然後 for 迴圈就要改啦,原本是:

for (var i=0;i<allData.length;i++)

要改成:

for (i = dataIndexStart; i < dateIndexEnd; i++) 

然後多加一個判斷:

if (i>= data.length){break;}

稍晚一點我來想辦法把 code 完整呈現 (不然我覺得應該沒人知道我在共三小),今天結束。


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

尚未有邦友留言

立即登入留言