Frontend Intermediate Course - 作業七直播筆記

交作業時就有備註自己知道的兩個 bug，跑版問題跟語言按鈕在第一次切換時 CSS 無法轉換。

跑版問題因為胡立老師在我交作業前有提示過，所以他就沒有再解答，要我靠自己 XD

第二個語言按鈕切換問題，胡立老師給這樣的提示：

這是因為你第一次按按鈕之後執行 selectButton，這個 function 會幫 div.menu button 加上 click 事件所以你第一次按鈕之後，只是加上這個事件，並不會被執行到第二次按的時候因為已經有加上 click 事件了，所以才會有作用。

後來解決方法是在 selectButton 函式中拿掉 click 事件，改成每次清空兩個語言按鈕的 selected class，然後再加上 selected class 到點選的按紐。

完成的程式碼：

function selectButton(lang) {
    $('#zh-tw').removeClass('selected');
    $('#en').removeClass('selected');
    $('#' + lang).addClass('selected');
}

跑版的問題嘗試了好幾種方法，後來還是暴力解法比較適合我，在 changeLang 函式中，清空 $('.container') 之後再塞入兩個佔位空的 div 維持版面。所以 Ajax 的部分可以維持原本的

$(getViewbox(streams[i])).insertBefore($('#first_viewbox'));

雖然解法不是很優雅，不過是我目前能夠想到的方法。

完成的程式碼：

function changeLang(lang) {
    $('h1.title').text(window.I18N[lang].TITLE);

    selectButton(lang);

    currentLang = lang;
    offset = 0;
    $container.empty();
    $container.append('<div id="first_viewbox" class="viewbox"></div>');
    $container.append('<div class="viewbox"></div>');
    getStreams();
}

胡立老師的直播：
7. 走向國際：i18n

這次看完直播沒有什麼筆記，基本的重點在做作業時都知道了，最重要的是在前幾個作業要把架構都寫好，這樣這次作業其實不用修改很多。

唯一一個自己需要再加強的是關於 JavaScript 中函數的參數。胡立老師講解時有用到語言參數代入函式，雖然說基礎參數概念我大致上了解，但更進階的用法跟觀念我就搞不太清楚。

下一次的作業難度比較高，而且要學 Node.js。我覺得應該又是持續崩潰的一個作業。話說從作業四之後每次都很崩潰 QAQ


附上修改後的 CodePen：

See the Pen HW_7 Modified by Peggy (@pychiang) on CodePen.