i18n_selector map a wrong i18n value

[nonumpa]

Issue snapshot

Root cause

目前是用 select.getAttribute(selectors) 讓所有 selector 一起 query，但是回傳的元素順序是按照 dom 順序排列，跟 selector 順序無關，所以 i18n 的值沒有照著 dom 上的 selector 順序排就會對應到錯的元素。

References

html
https://github.com/nics-tw/guide/blob/main/_components/form/index.md
https://github.com/nics-tw/guide/blob/main/_includes/form/form-elements.html

js

guide/assets/js/main.js

Line 7 in e311f88

const selector = select.getAttribute('data-i18n-selector')

Possible solutions

1. 可以把 i18n 順序調整得跟回傳的 nodelist 一樣
2. 或是分開 query selector、更新 value

const selectors = ["[for=city]", "[for=id]"];
const i18n = {
    "[for=city]": "City of residence",
    "[for=id]": "ID type",
};

selectors.forEach(selector => {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
        // Update the inner text with the i18n value
        element.textContent = i18n[selector];
    });
});

[IK-Ngoo]

PR #39 嘗試暫時解決表單元件範例中，輸入欄位與多語言標籤排序不一致問題。